And another one article about css in js with zero complex styles examples…
Nikolay Talanov
256

Note that my answers are mostly related to styled-components because I am most familiar with it, but apply to pretty much all CSS-in-JS systems.

Do you really want to say that all modern apps require only {color: red} complexity level stuff?

No, most (all) CSS-in-JS systems cater to any complexity level you can imagine with CSS, and much more.

And what about parent-children relations? Let’s say you created your amazing component with isolated styles. And then, few months later, you created some new parent container component, where you need to place this original component, but it’s suppose to look slightly different.

Yes, this happens. Luckily this is mostly a non issue, you could for example

You gonna pass some additional attribute to this component, to affect how it looks like (based on some inside js logic with ternary if/else)
do that, or
 
> you gonna pass new styles object, which you gonna create/modify just for this case?

Luckily there are other ways to manage this too. For example, `styled-components` provides a ThemeProvider, a higher order component that makes these kinds of changes a breeze. Your top level parent provides the theme, which makes things like

And what if you have 5 different parent components, each modifying original component in some different way (by affecting different component parts)?

possible. That said, you can also endlessly nest ThemeProviders if needed, so also

And, OMG, what if you need to wrap this parent component into another one, which suppose to override styles-influence of his lower-level parent components?

becomes a breeze. If your bottom level components become too unvieldy, resulting in

unmaintainble abomination you gonna have in styles object of your original component? And how exactly you gonna track all these connections?

you most likely should rethink your encapsulation a bit better. That said, most likely your lower level components will be rather dumb, so you should be able to track these connections through your developer tools.

And you know how it can be done in, let’s say, SCSS? (styles written ugly way, to save space)

That same exact block of SCSS works straight out of the box with `styled-components`, not saying that it’s particularly good practice to affect your parent containers from your children (obviously sometimes you have no other choice :()

And there is no magic, it’s just cascade, main part of css. You can add as many wrappers as you want, and always modify css-code of component itself, without touching anything else. All influence-connections in one place and importance-order is very clear.

Yes! That’s why CSS-in-JS rules: there’s no magic, it’s is just cascade! No inline styles, actual CSS in your JS, working like CSS but with much more options for the developer.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.