What Occurred to Separation of Considerations in Frontend Improvement

Publish from October 5, 2023, filed beneath Internet Improvement (feed).

Nicole Sullivan not too long ago asked the community whether or not separation of issues (SOC) was nonetheless serving us. 58% responded that it “nonetheless works,” however the matter appeared extra advanced and attention-grabbing than that.

My very own feeling and response was that there was a “great irony”—that “separation solely began to work effectively as soon as many stopped specializing in it, about 10 years in the past,” as a result of then, “we acquired ever higher CSS selectors and assist for them, and JavaScript was being considerably improved,” however “it was additionally the daybreak of the frameworks time […] that accelerated and finally undid most concentrate on issues like SOC.” I submitted that “separation might have by no means finished higher—and likewise by no means worse.”

Is that this what occurred with separation of issues, in our subject? May I substantiate this sense? Let’s take a look.


  1. What Enables and What Prevents SOC
  2. SOC Improvements Through Web Standards
  3. SOC Regressions in Frameworks
  4. The Great SOC Irony

What Permits and What Prevents SOC

First, what truly helps or prevents separation of concerns?

The reply seems to be each straightforward and troublesome.

It’s straightforward after we go by “every little thing associated to doc content material and construction is finished in HTML, every little thing associated to presentation in CSS, every little thing associated to habits in JavaScript, and the touchpoints of the three are restricted to absolutely the minimal crucial.”

It’s troublesome after we go by the precise steps that allow and stop separation, as a result of separation is determined by particular options of every HTML, CSS, and JavaScript (i.e., the alternative ways they intersect with the opposite languages), but additionally on engineering ideas and tradition. Separation of issues stands and falls with being sought and practiced.

That’s, it was exhausting to perform good separation of issues within the 2000s, and it’s straightforward to do now, however we had a number of web sites the place it was truly finished within the 2000s, and plenty of the place it’s not revered as we speak. That’s on engineering ideas and tradition, not on internet requirements or browser assist.

SOC Enhancements By way of Internet Requirements

The best solution to gauge enhancements, now, could also be by CSS selectors and their assist. It’s because all web sites use HTML, however extra web sites additionally use CSS than they depend on JavaScript; and it’s as a result of the much less want there may be for lessons and IDs (the prevalent selection options), the extra alternatives there are to extra totally separate HTML and CSS, and subsequently issues.

In different phrases, the speculation is that in frontend improvement, we observe the least separation of issues, and most mingling of them, round presentational markup—and that one solution to restrict the quantity of presentational markup is by offering more practical selectors.

Gauging, nonetheless, how the scenario with respect to selectors developed is finicky, time-consuming, and error-prone, as it could require going by every selector; after which not when it was specified, however when it was first supported; in every consumer agent; then researching and taking into consideration their respective market shares.

Maybe we will do with one thing extra tough, however nonetheless telling:

Essential: I used to be very fast with this, trying extra for ballpark numbers than something. I’ll be more than pleased to simply accept corrections and additions, should you’d like to offer suggestions!

So that is all tough, however there may be some attention-grabbing clustering round 2010: Round that point, CSS 2.1 matured, and work on CSS Selectors Stage 3 and 4 commenced. Very roughly, too, we will suspect improved selector assist throughout these and the next years.

That’s, there are some indicators that separation of issues, between HTML and CSS, might have grow to be considerably simpler beginning at round 2010.

SOC Regressions in Frameworks

Let’s now take a look at frameworks, to examine if there’s one thing to the concept their emergence labored counter the choices to separate issues that we obtained from CSS.

For that reason I reviewed round 60 frameworks (together with those I coated in The Little Ebook of HTML/CSS Frameworks, and later prolonged):

There have been many extra frameworks launched in 2010 (±4 years) so this isn’t an entire record, however let’s cease right here.

We do have some indicators, then, that since round that point we had plenty of frameworks that didn’t separate issues, however mingled them as a substitute.

The Nice SOC Irony

So what occurred, and might we converse of irony, then, round separation of issues in frontend improvement?

It does appear so. Separation of issues was fairly exhausting, and probably the most limiting elements had been selector selection and assist.

However simply when that modified, and extra CSS selectors have been launched and supported, we noticed a lot of frameworks tie presentation to construction, particularly by use of presentational class names.

As an alternative of utilizing the brand new selectors (or, to be clear, fewer, practical, or generic class names) to make the markup lighter and equip it higher for future CSS-only redesigns, the frameworks gave that chance away and assured redesigns to require HTML updates. Their tight coupling meant the alternative of separation issues.

Earlier than I conclude, I have to name out once more that extra knowledge would assist. I labored with ballpark numbers for CSS selectors, and couldn’t analyze “all” frameworks. Extra knowledge might assist the speculation, or demand a special one. (Moreover, one might collect a choice of situations the place separation of issues has truly improved.)

Ultimately, I’d prefer to underscore what the bulk expressed in Nicole’s ballot—separation of issues “works.” It might work even higher if we had broader assist for historic however superior options like style sheet references in HTTP headers (example and context), however:

Separation of issues works higher than it ever has. We—and our tooling—could not be making good use of it.

Many due to Lars Knudsen for reviewing this submit.

About Me

I’m Jens, and I’m an engineering lead and author. I’ve labored as a technical lead for firms like Google, I’m near W3C and WHATWG, and I write and evaluation books for O’Reilly and Frontend Dogma. I really like attempting issues, not solely in internet improvement, but additionally in different areas like philosophy. Right here on meiert.com I share a few of my views and experiences.

If in case you have a query or suggestion about what I write, please go away a remark (if obtainable) or a message. Thank you!