4 ms·
How do you handle advanced CSS Level 3/4 selectors, CSS grid, and media queries?
by vehemenz 8y ago
How do you handle advanced CSS Level 3/4 selectors, CSS grid, and media queries?
- bastawhiz 8y agoThe idea with CSS-in-JS is that you don't use selectors. Since you are constructing DOM nodes individually, you don't need to select them. Styled components can accept props, which lets you style dynamically (e.g., using an array index to replace `:nth-child`). With regard to media queries, it depends on the library. For the library the author is using, the media queries are defined inline: https://www.styled-components.com/docs/advanced#media-templates https://www.styled-components.com/docs/advanced#media-templa...
- GordonS 8y agoDoes it use (shared) variables, like with SASS? With SASS, I find it really convenient to define variables for common/brand colours, for example.
- bastawhiz 8y agoYou can define a "theme" object, which you can inject into your styles (with an expression inside the template literal). Other libraries support variables more directly.
- addedlovely 8y agoYeah or pseudo elements / hover / focus etc?
- exogen 8y agoPeople often confuse the two, but CSS-in-JS is a distinct concept from "inline styles" (which can make pseudo selectors more challenging). Almost all CSS-in-JS solutions (including styled-components mentioned in the article) still support pseudo selectors, media queries, etc.
- iaml 8y agoWhat's the problem, you just use them. If you need to reference component itself you can use & selector, works exactly like sass or less. If you want to reference another styled component you import it and ${Component} will reference autogenerated class. Also nobody stops you from writing nested css rules. You can also write cool media query helpers like this https://www.styled-components.com/docs/advanced#media-templates https://www.styled-components.com/docs/advanced#media-templa...