While CSS Zen Garden gave us a glimpse of a possible world where CSS could change and HTML never would, the reality—at least, in my experience—has been much different. Design changes often require both HTML and CSS to change. That’s because the fundamental structure of what we want to style also changes.
Some rail against this unified theory of application development on the purist grounds that each pillar of web development should remain completely autonomous.
To answer that question, let’s consider the React approach. There’s a lot of talk about the virtual DOM but, to me, the big thing about React is its component-based approach to application development.
This component-based approach is very much in line with the SMACSS approach. They’re both trying to modularize an interface. Part of that modularization is the ability to isolate a component: to make it independent of the rest of the interface.
At Yahoo!, we had a folder structure that looked similar to this:
/js/modules/modal.js /css/modules/modal.css /html/modules/modal.mu
Whether you generate CSS classes or inline the CSS into the actual HTML won’t really matter for client-side-only applications. If you want to generate the initial view server-side then you might have some considerations about how to separate these pieces to allow caching, if that’s a concern. (Why wouldn’t it be a concern? Maybe you’re doing post-render client-side caching.)
http/2 and Web Components
What, me worry?
There has been some talk about CSS-in-JS on Hacker News today with a posting about Descartes.io over at: https://news.ycombinator.com/item?id=11143377
I think it's not the best solution violating the separation of concerns, but it's ~sure~ a lot better than abusing HTML as some kind of a go-between to make JS and CSS talk to each other!
I'm not sure which approach is cleaner: CSS-in-JS or JS-in-CSS. I made the JS-in-CSS work for me, but I'm a CSS guy, not a JS guy so maybe I'm biased ;)
Either way, I'm glad to see people experimenting and trying out new things.I can't wait to see how these (and other) experiments inform how the web evolves in the future!
Are you planning on releasing any experiments of your own in the realm of CSS-in-JS? I'd love to see what you come up as a mashup of the two syntaxes, based on your experience!
We (in the website building world) have focused mostly on those three parts but now start to feel the need for another way to view the way to construct websites as the web is growing into more (web)app style. Things from object oriented development world like inheritance and methods being part of each object start to make sense and frameworks like React offers that.
Have you seen the Yandex BEM system? Only the CSS part of it has gained respect outside Russia. I saw some videos where Vladimir Grinenko explained the framework and I was impressed with how well structured it is. Take a look at it here: https://en.bem.info/ and here http://youtu.be/2r72EjALq2s
There are ways to create focused, semantic markup and CSS without violating the separation of concerns. Here's my approach using LESS: https://medium.com/@dehuszar/semantic-remapping-with-css-pre-processors-906ba1a9910c#.smpvjakm3
As the web becomes more interactive, more reactive, the line begins to blur between content, layout, and behavior.
Well, let me land my support to keeping CSS and JS separate. I mostly do design, and HTML/CSS, preprocessors. For years now I have been struggling with JS. I just don't get it. Maybe, I am dumb or maybe I just have some mental block do to my aversion to JS. I don't seem to have much trouble with a bit of Bash and Python. But this push to have designers code, and now having CSS in JS, is screwing me over and making me less hire-able.
Whilst I don't mind combining all needed things (JS/CSS/MU) of a component/module/whatever into one file – they, after all, only work when combined – I don't like the React approach.
In React you can indeed define styles, but not using the CSS syntax we are already used to. The use of some specific selectors (combinators, to name just one) is therefor not possible with said syntax, leaving me as a frontend developer limited in my options.