62 lines
1.7 KiB
Markdown
62 lines
1.7 KiB
Markdown
---
|
|
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
|
|
|
|
```css
|
|
[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
|
|
|
|
```css
|
|
[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"`
|