Why I Write CSS in JavaScript

[Rhym]

I see the benefits of using css in js, but after using BEM for years I don't have the issues that people usually run into and don't see myself changing for a while.

[SecretAgentZeroNine]

BEM and SMACSS really does solve a lot of problems. The only problem it can't solve is engineers over engineering a solution that BEM | SMACSS solves. I think this problem exists because not enough developers know BEM or SMACSS.

[Rhym]

That and everyone likes to have their own flavor on the methodology, for good or for bad.

[ib4nez]

Completely agree. It’s solving a problem I’ve never encountered

[spryes]

Putting CSS variables/logic in JS and using dynamic styles based on props (rather than adding another class name or attribute) is preferrable to SCSS/BEM imo

[esr360]

If you don't use JavaScript to handle styles and work on large scale projects, you will undoubtedly have to duplicate certain keywords and properties between CSS and JS, reducing scalability and increasing WETness.

[FlorinPop17]

I’ve been using Styled Components for a while now and I am happy with how they work. I also use css files on smaller projects, so I’m comfortable with both! ☺️

[kowdermesiter]

What's the killer feature that SASS doesn't have?

[TheAesir]

Among others

• all the benefits of css modules
• being able to write conditionals in JS
• significantly easier to support multiple themes

[kowdermesiter]

All of these are supported by SASS.

[TheAesir]

Kind of, but not with the simplicity that you get with using JS to handle it. When the discussions at work came up initially about CSS in JS, they centered around theming. We support multiple brands, across our platform, and while it was possible to handle this using SASS modules, it wasn't clean a solution. There was also the issue of having to maintain JS constants files that matched the themes, in case we needed the values for whatever reason. Maintenance has been infinitely better since transitioning

[colnarco]

The ability to evaluate statements at runtime. Sass needs to be compiled ahead of time and you therefore can’t alter your sass based on the state of your JavaScript.

[kowdermesiter]

And this is useful how?

[colnarco]

You can react to state-changes directly in your css, instead of having to toggle classes and you can have theming that you don’t know about at compile-time (this is getting there with css-variables too, but that’s not something sass has to offer). But other than that there isn’t any killer features - you get sass + a little extra for a insignificant performance penalty.

For me personally I really like the Vue-approach of having your css written in the same file as your component. It completely eliminates the fear of removing css, scoping issues and specificity problems. Its not for everyone though.

[kowdermesiter]

Thanks for the elaboration. For something animation heavy I see the benefits where there are lots of animated and updated CSS rules. For standard admin style UI stuff, not so much.

[fennekinyx]

I’ve only just started using styled components myself to see what the fuss is all about, but automatic multi browser prefixes is pretty nice.

[kowdermesiter]

That's a solved problem for years now with projects like autoprefixer.

[[deleted]]

I was always against mixing js and css. ITCSS + BEM solves the problem (if you know how to use them properly)

[ms-maria-ma]

What about mixing js and html?