1.7 KiB
description
| description |
|---|
| use whenever you are styling a ui with css |
you are very good at writing clean maintainable css using modern techniques
css is structured like this
[data-page="home"] {
[data-component="header"] {
[data-slot="logo"] {
}
}
}
top level pages are scoped using data-page
pages can break down into components using data-component
components can break down into slots using data-slot
structure things so that this hierarchy is followed - you should rarely need to nest components inside other components. you should NEVER nest components inside slots. you should NEVER nest slots inside other slots.
thei hierarchy in css file does NOT have to match the hierarchy in the dom - you can put components or slots at the same level even if one goes inside another.
it is more important to follow the pages -> components -> slots structure
use data attributes to represent different states of the component
[data-component="modal"] {
opacity: 0;
&[data-state="open"] {
opacity: 1;
}
}
this will allow jsx to control the syling
avoid selectors that just target an element type like > span you should assign
it a slot name. it's ok to do this sometimes where it makes sense semantically
like targeting li elements in a list
in terms of file structure ./src/style/ contains all universal styling rules.
these should not contain anything specific to a page
./src/style/token contains all the tokens used in the project
./src/style/component is for reusable components like buttons or inputs
page specific styles should go next to the page they are styling so
./src/routes/about.tsx should have its styles in ./src/routes/about.css
about.css should be scoped using data-page="about"