Hacker News Reader

Comment by vehemenz | Hacker News Reader

How do you handle advanced CSS Level 3/4 selectors, CSS grid, and media queries?

The 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-templa...

Does it use (shared) variables, like with SASS?

With SASS, I find it really convenient to define variables for common/brand colours, for example.

You 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.

What'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-templa...

Yeah or pseudo elements / hover / focus etc?

People 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.

Reply on news.ycombinator.com