3 ms·

The problem that you have described (relation between pieces of HTML, JS and CSS code) is solved by using components/widgets (for example: using BEM). I think

The problem that you have described (relation between pieces of HTML, JS and CSS code) is solved by using components/widgets (for example: using BEM). I think the problem is that developers do not understand that CSS should be treated like other languages, and developers should organize it rather than let anyone write it as they wish. You don't write your server code in a single file without functions, using global variables and introducing side effects, you don't let a trainee edit important code without reviews, why do you do it with CSS? I remember reading that Github had something around 9000 CSS rules on a single page. Github developers are talented, but somehow they didn't pay proper attention to CSS code too. CSS code should be split into components, should be easy to analyze, and should be written so that minor edit of one widget won't break something else on another page. > In fact the seperation causes so much mental overhead, that we need interactive browser dev tools just to be able to find what styles are applied to what element. That means CSS is not well organized.

gaastonsr 9y ago
Agreed most problems can be solved by CSS only. My argument would not be we're solving something in CSS, we're simply removing the friction by having the HTML and CSS separate. I was one of the skeptics and felt CSS, SASS, or Less.js was good enough for me until one I day I was tired of setting up my loader in Webpack and I just dropped in styled-components. And then my JSX was more beautiful because my tags now had its purpose in the name. And I didn't need to worry about class names anymore. And adding variations (modifiers in BEM) was a breeze. And I didn't need to go back a forth between the CSS and the component to style it. It was just so much better that now I'm a convert. I still can work with CSS only but the convenience that styled-components brings to my components is invaluable. I hope this sheds some light as to why we prefer to write CSS in JS than writing good old CSS.
batmansmk 9y ago
"it's because you don't know the tool and don't use it properly" it is likely more a problem of CSS ergonomics more than a global developer and designer population problem, don't you think? We don't have heated debates at this level around SQL, HTML for instance. Granted, people complain about JS a lot as well.

gaastonsr 9y ago

Agreed most problems can be solved by CSS only. My argument would not be we're solving something in CSS, we're simply removing the friction by having the HTML and CSS separate. I was one of the skeptics and felt CSS, SASS, or Less.js was good enough for me until one I day I was tired of setting up my loader in Webpack and I just dropped in styled-components. And then my JSX was more beautiful because my tags now had its purpose in the name. And I didn't need to worry about class names anymore. And adding variations (modifiers in BEM) was a breeze. And I didn't need to go back a forth between the CSS and the component to style it. It was just so much better that now I'm a convert. I still can work with CSS only but the convenience that styled-components brings to my components is invaluable. I hope this sheds some light as to why we prefer to write CSS in JS than writing good old CSS.

batmansmk 9y ago

"it's because you don't know the tool and don't use it properly" it is likely more a problem of CSS ergonomics more than a global developer and designer population problem, don't you think? We don't have heated debates at this level around SQL, HTML for instance. Granted, people complain about JS a lot as well.