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
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!”
Sounds reasonable to me. :)
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?
You got my vote :D
About your opinions. You just told us that you have strong opinions, not why.
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.
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...
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?
why do we need the full power of JavaScript for cascading style sheets?
Ok this seems "fairish".
Ok, even though decent third party CSS are scoped and BEM or similar constructs have been around for a long time.
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
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. :)
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.
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.
"the web should be your last choice in platforms", yet more and more native solutions are just embedded web applications with optimized browsers.
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 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 ;)
Care to elaborate? :D
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.
Guess you saw the Tweet storms this weekend? 🙃
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
I agree with you on that!
With React I tend to gravitate towards CSS in JS. For vanillaJS, I think a separate CSS file is still the way to go.
Won't start using until it's getting supported by the big browsers
I don't really care. I never was a site builder.
css in JS
ahahha you're welcome :D
It's not the library the problem. It's the integration between libraries IS the problem.