This seems to divide the web community.
Some people say CSS is to hard and CSS-in-JS is the savior.
Others say if you don't learn CSS you should leave the web and start developing for a different platform.
I'd like to hear your opinions about this, but try not to explode :D
Latest comments (33)
With React I tend to gravitate towards CSS in JS. For vanillaJS, I think a separate CSS file is still the way to go.
I have nothing against CSS-in-JS, but I have no plans to use it unless it truly becomes the new mainstream. I've gotten used to, and enjoy, using the CSS cascade and global nature to layer workable styles onto a webpage. It's reliable but still has enough power and creativity to do some amazing things. CSS-in-JS to me solves problems that aren't really problems. Even with CSS modules, they help but are still more work than they were really work it.
I've had the most success with Atomic CSS, bringing the modularity and controlled cascade while still leaving room for the usual CSS powers. It's unlikely CSS-in-JS will convince me anytime soon. But I'm not going to actively fight against it from making progress either.
Won't start using until it's getting supported by the big browsers
I don't really care. I never was a site builder.
Currently, CSS suffers some long-dated problems:
CSS-in-JS aims to solve those problems... and it usually does. If you take something like style-components or Emotion, you can use JavaScript values directly in your styles. Also, they offer emulated encapsulation (i.e. good enough for most) and tree-shakable rules as they're basically JavaScript objects. Perfect, isn't it?
Now the problems:
When I have to use CSS-in-JS, I tend to stay as close as "native" CSS as possible. It's usually CSS modules.
For the other problems, it's more about the discipline of keeping your code clean.
But all in all, I'd rather wish the initial problems above solved within CSS than fully adopt a custom solution like CSS-in-JS.
I do not understand what the fuzz is all about. New techniques are often invented because it scratches someones itch. If you do not feel the itch - good for you. But do not start telling people where they have their itches.
Up until this post, I did not know, that this (CSS in JS) is a thing. Googling for it, I found some nice frameworks which I keep on my radar. And when I feel the itch, I know how to scratch it ;)
ahahha you're welcome :D
I have lots of experience with BEM-Style and Object-Style CSS (Sass, Postcss) and a little (as in hobby) with CSS-in-JS with "Styled Components".
What I miss when I do CSS-in-JS is the big-picture-overview of the whole styling-system. I often look at the files in the styles-folder, the mixins, the variables etc. to keep a feel for it. For me that's important in order to decide where to add styles, where to refactor, when to use !important, when to use utility-classes. With styled-components, I lose that overview. Every component has to fend for itself.
What I really like about styled-components is that I don't have to think about classnames and scope so much. Having the component and styles in one file is also a big plus.
I can totally see how somebody without years of experience with CSS might prefer the JS-way, and I don't think it's a bad choice at all. For me the classic way just feels more "at home", since at work I don't do SPA-style websites.
css in JS
Never done it but from what I hear it sounds superficially easy but might end up being pretty complicated in the long run.
Honestly I don't understand why people want to avoid writing CSS "the old fashioned way". It can be difficult of course but not impossible.
Whatever works best for you.
I don't personally encourage CSS inside JS simply because, the people that use it, have little to no experience with it and their logic goes something like this: "I tried CSS only and it didn't make our div responsive, guess it's time to code it in JS" ...and they make a mess.
If your framework needs CSS inside your JS files, that's fine. Just know what you are doing.
There's no need for gatekeeping. Saying if you don't use CSS you should leave the web and develop for something else is presumptuous and rude. There's far too much of that in the developer community, it's toxic, and it needs to stop.
Use what makes you productive, efficient, and happy. :)
It's an absolute no-no for me. Want my sites to be able to work without JavaScript on devices like screen readers with accessibility-specific features that rely purely on HTML & CSS.
Also in a lot of cases JavaScript makes the browsing experience more usable and accessible
I agree with you on that!
Screen reader sit on top of the browsing experience so understand JavaScript. In fact JavaScript is an accessibility supported technology according to the w3c. Also some of these cssinjs libraries extract to simple CSS.
It's not the library the problem. It's the integration between libraries IS the problem.
Guess you saw the Tweet storms this weekend? 🙃
Some comments may only be visible to logged-in visitors. Sign in to view all comments.