What is Your Opinion about CSS(-in-JS)?

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

Did you find this post useful? Show some love!
DISCUSSION (35)

Use whatever works best for you, be it a CSS stylesheet, CSS modules, styled components, CSS-in-JS, whatever. But doing bashing on other people's work just because of the technology used is just rude.

Basically, it's like this:

Lea dislikes an older technology X. She thinks: “If only we could change the past and start from Y instead!”. Lea uses a time machine to introduce Y first. Fast forward to present day. To her surprise, everybody uses X now. “It’s new and doesn’t have the problems of Y!”

I agree to some extent, but a good portion of software engineering (and engineering in general) is things are continuously improved upon based on past experience. If we weren't making improvements, there'd be no reason to make anything new in the first place. That isn't to say everything is an improvement or better, but many things are. There's a lot of hype and bandwagoning around certain technologies that is IMO misdirected, but many new technologies just are legitimately better than their predecessors. A bigger problem IMO is people using new technologies where they don't belong simply because they're 'new.'

I tend to be pretty happy tracking newer things but trying to stay on the back wave of the adoption curve.

It's very painful to be on the front edge of a trend no matter how correct that trend is. I understand the need to move off CSS in order to avoid a lot of types of pain, but I don't want to do it just to incur a bunch of other types. I don't want to fundamentally rewrite big parts of my code at someone else's pace or else be caught in a limbo of unsupported techniques and libraries.

I agree with CSS in JS's purpose a ton. But I'm only now starting to think the landscape has stabilized with a few winning ideas that are worth getting into.

To choose one over the other based on principles would be naïve. It depends on the problem you're trying to solve.

CSS great for static pages but the cascade (one of the big pluses of CSS) quickly becomes cumbersome when you start using a component based architecture. (cue cries of "you're not doing it right then, burn him, he's a witch). Especially if you want to share those components around. For React and SP apps I'd use a CSS in js solution (ideally styled-jsx) over the regular CSS stylesheets, it makes the whole process easy, and you can still get the benefits you would have using the normal stack. For server rendered apps, eg. A rails app, PHP or anything involving templates and / or MVC then traditional stylesheets / style assets would make more sense.

For React apps, styled-jsx is wayyyyy easier, faster and allows for easier code re-use. Your styles are in with your component code, you can still use utility classes etc.

That's my two bits.

I personally enjoy using CSS-in-JS when working in React. If we take a moment to think about it, CSS-in-JS is the next natural step after JSX. We started using React because we wanted HTML that was as "smart" as Javascript. Now, we want CSS that is as smart as Javascript too. The fact that our CSS can REACT (get it?) to the state of the application instead of having classes swapped in and swapped out conditionally just seems to make more sense to me. Of course, CSS-in-JS doesn't mean you don't need to learn CSS. My CSS-in-JS looks very much like standard CSS except that it's far more concise and dynamic since one class can REACT (amirite?) to the state of the app instead of having several alternating classes that get swapped out based on the classes that an element gets decorated with. Also, encapsulating your styles inside a Component follows the "everything is a component, man" motto of modern web development. Finally, the real issue with CSS-in-JS is performance. How much do we lose in performance by relying on inline styling when compared to static and optimized CSS files? How much do we gain in control over our CSS by having it be as "smart" as Javascript?

Ben Halpern DEV.TO FOUNDER

Hey there, we see you aren't signed in. (Yes you, the reader. This is a fake comment.)

Please consider creating an account on dev.to. It literally takes a few seconds and we'd appreciate the support so much. ❤️

Plus, no fake comments when you're signed in. 🙃

If you like the tight integration thats fine, run with it. I personally wouldn't do it, preferring CSS in its own file while still following a modular pattern.

React won't be the trendy library forever so ride that wave while you can. When it comes crashing down how are teams supposed to cope with migrating JSX to DOM and CSS-in-JS to CSS? Keeping a separation of concerns in a project is a good thing when you consider migration.

What if another team not using React at your corporation wants to use the same styling? What do you do then? Write a script that exports all the CSS-in-JS to just CSS just because you want the CSS inline with the JavaScript? It seems like an unnecessary marriage where the benefits do not outweigh the potential pitfalls.

Web Components solve the problem of CSS having a single scope and the spec provides patterns for when components need a theme or custom styling. CSS collisions can be avoided by following a pattern like BEM or OOCSS. These concepts should not be considered hard considering some of the quirks found in JavaScript. If someone thinks CSS is hard by itself perhaps they just never learned the fundamentals properly. I find a lot of educational programs do not sufficiently teach specificity or architectural patterns for CSS.

The only time I have consistently thought I needed CSS in JS was when manipulating a matrix3d transform.

I don't know what it is but I have opinions which make me the most dangerous type of human being right now :D

What constitutes CSS-in-JS? Is the <style> section of a Vue component CSS in JS too?

I think it makes sense in a context of a SPA even though I'm not actually sure what's the benefit of having "scriptable" CSS beyond SASS (but I've never maintained a huge frontend app so my view is definitely limited).

I googled "css in js" and found the benefits from this article: hackernoon.com/all-you-need-to-kno...

Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).

what's wrong with having Component.js and Component.css side by side? Is it that bad you need an entire library to solve this?

CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS

why do we need the full power of JavaScript for cascading style sheets?

“True rules isolation” — Scoped selectors are not enough. CSS has properties which are inherited automatically from the parent element, if not explicitly defined.

Ok this seems "fairish".

Scoped selectors — CSS has just one global namespace. It is impossible to avoid selector collisions in non-trivial applications.

Ok, even though decent third party CSS are scoped and BEM or similar constructs have been around for a long time.

Unit tests for CSS!

This is cool I guess!

The drawbacks listed in the article are the learning curve, more dependencies and the learning curve again.

I'm not against it by principle (I mean if you're already doing a SPA that requires JS for all of it...) but is it worth it the effort?

Sorry, mine are questions, not really answers :D

All this complexity made me think of this post:

I don't know what it is but I have opinions which make me the most dangerous type of human being right now

I have this immediately printed on the paper and glued to the back side of my monitor. Thank you, you literally made my day.

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.

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.

Currently, CSS suffers some long-dated problems:

  • interaction with JavaScript is lacking;
  • we can't always afford the encapsulation of Custom Elements;
  • it's very hard to tree-shake the CSS codebase.

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:

  • you need JavaScript to style your components: this means you have to wait for JavaScript to download, parse and execute (and of course you're out of luck if JS is disabled altogether);
  • it tends to hide what happens under the hood: what happens when a JS value changes? Does it create another CSS class? Does it put changes inline? Is it performant?
  • fragmentation: there are dozens of CSS-in-JS libraries, each with their syntaxes, quirks and techniques (although just a handful are really widespread); you have reusability as long as you're using the same library;
  • it seems developers are forgetting/not learning what CSS - the engine behind all this anyway - really works: this Twitter poll by Max Stoiber (I'm sure it's the inspiration of this post, together with its following debate) says pretty much about it.

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.

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. :)

Guess you saw the Tweet storms this weekend? 🙃

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.

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.

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 ;)

CSS being too hard (the reason you mentioned) is invalid, because if CSS is too hard, it will be too hard regardless of its location (in a .js or .css file), even harder with a new abstraction layer.

I would like the CSS in the JS files or at least in the same folder but different file, in order to have components (like Vue single file components).

I would not want to learn CSS-in-JS new abstraction like JSS wants. I would be a hater with objective reasons nevertheless on this abomination.

Anyway, if you would asked me if HTML in JS would be a thing a few years ago I would say no, it is stupid, but then I saw the advantages of the JSX over a template system and changed my mind.

I don't really care. I never was a site builder.

Won't start using until it's getting supported by the big browsers

With React I tend to gravitate towards CSS in JS. For vanillaJS, I think a separate CSS file is still the way to go.

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.

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.

Also in a lot of cases JavaScript makes the browsing experience more usable and accessible

It's not the library the problem. It's the integration between libraries IS the problem.

CSS is the savior.

CSS in JS is an illness and should be cured.

Also, the web should be your last choice in platforms, but that heavily depends on the problem to solve.

"the web should be your last choice in platforms", yet more and more native solutions are just embedded web applications with optimized browsers.

And it is on us to prevent further damage.

About your opinions. You just told us that you have strong opinions, not why.

Classic DEV Post from May 4 '17

How I went from failing every interview to a job at Amazon

About halfway through the interviews, the interviewer would seemingly give up in frustration. A few days later, I would receive the dreaded, “Thank you for your interest” email.

READ POST
Follow @reggylong to see more of their posts in your feed.
K 👓
Web/Mobile/Serverless - Consultant
Trending on dev.to
Software People — How Do You Deal With Stress/Bullies/Frustration?
#life #software #stress #discuss
Number of followers to be shown on a profile?
#discuss #healthydebate
What's your opinion on Coding Bootcamps?
#discuss #beginners #javascript #webdev
Saving time with a preset Tmux setup
#tmux #productivity #commandline #linux
Who's looking for open source contributors? (September 17 edition)
#discuss #opensource
Do tech companies care about your look?
#discuss #healthydebate #career
Number of followers to be shown on a profile?
#discuss #healthydebate
Why I Turned Down a Job Opportunity
#career #perspective