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

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!”

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

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?

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.

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.

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

Is front-end development having an identity crisis?

Vernon Joyce

#javascript#career#discuss

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