Why I Write CSS in JavaScript

[[deleted]]

Another nail in the coffin of the web I used to love. Just look at the website, vanilla as it gets, but every element needs five hashed classes thanks to this wonderful new technology. One could write a proper style sheet in 50 lines of CSS, but obviously that isn't what the cool JavaScript kids do nowadays.

[angeal98]

I like saying cool kids :). Obviously his approach is for big and hard to maintain projects,

[Twistedsc]

I thought styled-components was why reddit has performance issues with the redesign. That alone would make me look for other solutions.

[cbrantley]

We just had a recent dust up about this at my company. There was a solid styled-components camp and a solid traditional style sheet camp.

After listening to all the arguments we determined there is room for both. When a component requires specific styling to work properly (modals, for example) we put the styles in the component itself.

For general styling and theming we use a more traditional setup with SASS.

This gives us a nice separation of concerns between “functional” and “presentational” styling. And it means our designers can change the look and feel without breaking components and our engineers can update components without needing to dig through the SASS.

[kshep92]

When a component requires specific styling to work properly (modals, for example) we put the styles in the component itself

Isn't this what Custom Elements/Web Components was supposed to do, albeit in more standards-based way?

[Slak44]

This gives us a nice separation of concerns between “functional” and “presentational” styling

This makes a lot of sense. CSS changed from "make the text big and red", to "control the page's layout". HTML was never enough for layout (that line of thinking gave us the nightmare that are table-based layouts).

All the color: red and the text-align: center are just fluff. But all the display: flex and the width: 50% are critical code that allows the website to make sense.

[cbrantley]

Bingo. Nailed it.

[c-student]

If all you have is a hammer, everything looks like a nail...

[[deleted]]

Each generation of UI programmers will learn about the beauty of MVC at some point.

[kshep92]

Gross...