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?