Let There Be Peace on CSS
A talk on a war that is dividing the CSS community, made in the name of the “separation of concerns”, and a peace that is starting to see the light, thanks to bright minds and passionate developers
At the beginning of this year I gave an “instant talk” at London CSS meetup, titled “Let There Be Peace on CSS”. This talk has then evolved and has been reprised a few months later at Design Exchange Nottingham, and presented at Front End London and State of The Browser.
It’s the result of months of considerations and pondering, combined with the drafting of a proposal for a call-for-paper, and an interview with Mark Dalgleish, about an ongoing “war of words” that I have noticed in our community for some time.
Below is the written version of the talk. Not exactly a transcript, more of a different format of a speech.
Let There Be Peace on CSS
This talk is my attempt to bring peace between the two fronts. To help these two opposite factions to understand. To listen to each other, see the counterpart’s points of views. To find the good things they have in common, and learn something from that.
I am going to tell you a story.
A story of war and –hopefully– peace.
It’s a war of words, so I won’t use mine,
but those of the protagonists.
First of all: is there really a war in place? “War? What war?”. This is the question that a friend of mine asked me, when I told him that I wanted to give this talk.
Maybe I’m the only one seeing this war, maybe it’s just my personal point of view. So I’ll share with you some examples of what I mean with “war”, and then we can decide if this is a war or not.
The War Declaration
Everything started two years ago with this slide:
This is the opening slide of the now-famous talk React: CSS in JS, in which Christopher “Vjeux” Chedeau, Front-end Engineer at Facebook, proposed a technical and methodological solution to the problems he was facing when trying to use CSS at scale. The solution he proposed was a completely new, different way to style UI elements (in React, but not only).
At that time, it was quite a shock for the CSS community: some people went mad because of this, some people fell in love with it.
This debate has become more and more intense every day, bringing division in a community that used to be immune to this kind of “religion wars”.
Here are some examples of comments, opinions and reactions that I have collected in the last year or so, from well known and respected members of the web community.
Jeffrey Zeldman in Of Patterns and Power: Web Standards Then & Now:
Why is it slippery? Because too many developers and designers in our amnesiac community have begun to believe and share bad ideas—ideas, like CSS isn’t needed, HTML isn’t needed, progressive enhancement is old-fashioned and unnecessary, and so on. Ideas that, if followed, will turn the web back what it was becoming in the late 1990s: a wasteland of walled gardens that said no to more people than they welcomed. Let that never be so. We have the power.
And these are quite strong stances from Lea Verou and Aaron Gustafson:
Just saw @AtomicCSS
Syntax so bad I looked for "Is this a joke?" in the FAQ. Looks like a styling language designed by assembly coders!
— Lea Verou (@LeaVerou) January 11, 2016
Read a post on CSS & threw up in my throat a little. *Never* do this:
<div class="flex p1 red">
Don’t repeat the mistakes of the past.
— Aaron Gustafson (@AaronGustafson) June 15, 2016
CSS-Tricks, one of the most important and followed resources for CSS developers, dismissing these new techniques as just a way to avoid writing CSS:
— CSS-Tricks (@Real_CSS_Tricks) July 15, 2016
On the other side, things are not much better. React developers are completely dismissing the arguments raised by the CSS community, labelling them as “arguments from authority” and “FUD strategies”:
Also BEM goes under attack for being inherently flawed, confusing, and verbose:
“…the problems with BEM”. But BEM is a tool, it can’t have problems. Maybe it’s the way in which it is used that may be wrong or not suitable for the context?
The heat goes on, and the reactions are far from being moderate:
Huh, just came across https://t.co/TgjqOJhZDW for the first time.
Worst web dev idea of all time, or just a really bad one?
— Dave Shea (@mezzoblue) November 4, 2016
Now, look at these tweets and tell me if you don’t see a call to arms in them!
— 👨💻 Snuggsi ✈️ (@snuggsi) January 15, 2017
— molly e. holzschlag (@mholzschlag) January 15, 2017
Here is what Thomas Fuchs thinks of the separation of concerns in React/JSX:
~15 years trying to make everyone separate HTML, JS & CSS. And then suddenly everything went south and we’re writing code like this. pic.twitter.com/NnmJmPvEgp
— Thomas Fuchs (@thomasfuchs) December 19, 2016
The counter-arguments are sarcastic, like in this case…
I'm moving from storing my CSS, JS and HTML in different files, to physically putting them on different drives. Keep those concerns separate
— Ben Lesh (@BenLesh) December 23, 2016
…or even offensive. What is this? An evolutionary scale that automatically implies value? Should someone be considered a “caveman” just because they use Sass or BEM?
— ReactiveConf (@ReactiveConf) January 22, 2017
The debate is ongoing, with both parts attacking and counter-attacking:
♛ A bit rant-y. Kiss my classname. https://t.co/Jp35uMS6uP
— Zeldman (@zeldman) January 3, 2017
“Always”? Pretty absolutistic, no?
— Thierry (@thierrykoblentz) January 23, 2017
Do not divide the web into documents and applications. Documents are dead
— James Kyle (@thejameskyle) January 27, 2017
And then the classic “CSS is broken” saga. Now, this is a series of articles that I have collected: CSS is Broken (Sergio Zamarro); CSS is Not Broken (Keith J. Grant); CSS Sucks (Shaun Bent); CSS is Fine, It’s Just Really Hard (Jordan Scales); CSS is Broken: My Dime a Dozen Opinion (Jeremy Wagner).
Despite the titles, not all of them are against CSS or CSS-in-JS, but… you get my point, right?
Now, I don’t know how you call it but for me this is war, and the landscape I see around me is not great for the CSS community.
I know it’s just a war of words. But words can hurt and harm.
The Matter in Dispute
But then, what is the matter in dispute, exactly? Essentially there are two fronts in this war, and these are the main arguments that divide them:
Separation of concerns
You’re breaking the web
People use this tech because they don’t know CSS
CSS has intrinsic problems
Cascading and Inheritance
CSS global scope
CSS doesn’t scale and was never meant for that
On one side you have people that thinks that these new approaches are against the principle of “separation of concerns”, that they’re breaking the web, that they are relying on excessive tooling, essentially that people use these techniques because they don’t know CSS.
On the other side you have people that say that CSS has inherent problems and is flawed by nature. That cascading (“the C in CSS”), inheritance and global scope are the worst of all evils, essentially that CSS doesn’t work at scale and was never meant for that.
As you have seen, both parts may have their own good reasons; but at the same time they’re unwilling to listen to the other part’s reasons.
Been There, Seen That
Now, this is not the first web war that I’ve seen (and probably it will not be the last one). There’s been a lot of religious wars in the last ten/fifteen years on the web.
Let me recall you just some of them.
In the early days of the web, there were the Browser wars: Explorer vs. Netscape, “Best Viewed with” in the footer of every page.
This is what Peter-Paul Koch had to write in his post “Separating behavior and structure”:
Then there was the Flash vs. HTML war: this one was really a “religious war”, and at that time many were damn sure that Flash was going to kill the web. Well, we know how this has ended: Steve Jobs’ letter “Thoughts on Flash” was the tombstone, the beginning of the end for Flash.
The rise of the native applications (that would have killed the web as well) led to the HTML5 vs Native war:
First Apple killed Flash and now it is doing the same for HTML 5 for mobile app development – http://t.co/qkKCQJ1E
— Dare Obasanjo (@Carnage4Life) August 23, 2012
and we know how this is going to end too, right?
There has been another, even longer running constant regarding the web for the last 20 years—working with web technologies is not “programming”, not “real coding”.
But in the last few years there have not been any more big wars, only small scuffles.
Now, we have seen the CSS war, and we have seen that this is not the first one.
How there can be peace on CSS then?
I have a plan.
Recently I have started to ask myself why this war exists, and what is causing it. I don’t want to take a position. I see good reasons and valid points on both sides of the contention.
What I want to do is understand the reasons behind this war and do my part to stop it. Because if you understand the causes, you can try to find a solution (or at least find a truce).
The Main Causes
One cause is certainly what Mark Dalgleish highlighted in his talk last year at Frond Trends: the web was “invented” to share documents and this has deeply influenced the definition of the standards at its core and the implementation of the technologies that support them. But at the same time, the web has become a platform for the “distribution” of web applications, generating revenues and founding businesses, often on a global scale, with hyper-fast cycles of creation/destruction (or pivoting in some cases). And this requires a completely different technological and architectural approach, to support an increasingly complex development processes.
But keep in mind that “web applications” are what drives our industry now. Think to the experiences that surely we all know of the Guardian, BBC or Financial Times. Those that used to be “document/content-oriented” websites are now very complex “web applications” that lead and pave the way to future “best practices” in the industry.
So, surely an important role is played by this polarisation that the web has seen, between documents and applications. We all know that. But it’s not only that.
Definitely there is also a generational clash between an “old generation” of developers telling to the new generation “No, kids, don’t touch! This is not how things work. This is not how we are used to do things here!”; and a new generation of developers, the new “cool kids” of the block, using the word “modern” as a flag, challenging the existing best practices, completely ignoring the experiences, the lessons learnt, forgetting the progresses achieved by the previous generation in two decades of web development. But it’s not only that.
For sure, there is a misunderstanding of what the separation of concerns is. According to Wikipedia:
In computer science, separation of concerns (SoC) is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. A concern is a set of information that affects the code of a computer program.
Separation of concerns is not (necessarily) separation of technologies. It’s separation of context:
They are saying the same thing, but looking from two different angles, from two different perspectives, from two different points of view. And they are both valid; it depends on the context.
Now, up to this point I have used mainly the words of the protagonists of this story, of this saga I would say.
I want to give you my personal interpretation of what is the main reason behind this war: the community of CSS developers is a “young” community.
“Standard” patterns and architectures started to appear, and developers somehow stopped to fight one against the other for the “best” JS framework to use.
Well, maybe that’s what is happening to CSS too.
Nowadays you have “CSS developer” as a specific role in a team. As a community, we have started to discuss CSS Architectures and how to use CSS in the specific context of web applications.
So maybe we are simply a too young of community in that sense, and we never had the necessary discussion about who we are and what we do.
Another thing that gives me hope is that not everyone is willing to make a war.
There are lots of moderate people out there; people that don’t think only with prejudice (and in some cases bias), but have a more positive, constructive approach.
People that it’s worth to follow and listen to.
I want to give you some examples.
— Stuart Robson (@StuRobson) July 25, 2016
He’s absolutely right: stop blaming the tools. They are just tools! They are not good or bad per se. It’s how we use them, in which context and under which circumstances and limitations that makes a difference.
This tweet in particular made me think a lot about how we look back at the history of the web and the web technologies, and assume that it’s a linear process:
Too often we create linear histories of new approaches replacing old ones, ignoring context, tradeoffs and valid alternatives
— Mark Dalgleish (@markdalgleish) January 11, 2017
But actually it’s not. This is not how evolution work. Evolution is not a linear process.
Evolution is the survival of the fittest. The fittest in a specific context, in a particular moment in time.
In that sense, I love how Oliver Turner has tweaked the previous image with great irony:
— Oliver (@oliverturner) January 3, 2017
I think we should encourage people to explore new things; not by telling them what they’re doing is wrong, but by being enthusiastic about what we’ve learned from our experiences.
Just because everyone has their own recipe, it doesn’t mean they can’t make a great chilli – or website in as the case may be. I like my chilli my way, others like it theirs. That’s just like the web, everyone has their own preferred toolset but at the end of the day, the web is still the same core things.
Every few months somebody commits a cardinal sin of web development. They openly discuss or document a technology choice they have made that is contrary to the received wisdom of the ‘web community’.
You know what happens next. Other web developers, brave behind their avatars (even those of great standing), use social media to pour scorn on said developer and denounce them for their practice/proclamation.
Therefore, someone else’s technology choices, while initially nonsensical to you, maybe the exact same choice you would make given the same variables. Or, once you step outside your current mindset, they may simply represent the choices you should be making in the future.
Web development is not something holy, sacred against which you can commit a cardinal sin!
It’s certainly wordier to avoid dogma when you’re trying to make a point. But it’s more honest. It’s more clear. It’s showing empathy for people out there doing things different. It makes it easier for others to empathize with you.
Finally, I suggest you to watch these two talks, presented this year at CSS Conf EU in Berlin.
They both show how much love and respect for CSS there is in the CSS-in-JS community, at least in its most prominent members.
The first one is from Mark Dalgleish, in which he proves –beyond any possible doubt– how CSS-in-JS is not “against” CSS, but it’s its natural evolution. It’s the result of a convergence of different platforms towards a unified world where the codebase becomes a cross-platform, single source of truth, and styling – and so CSS too – plays an important role in this process of unification.
The second one is from Glen Maddern, co-creator of CSS Modules and Styled Components.
In his talks he tells the reasons that led him and Max Stoiber decide to create the Styled Components library.
Both Mark and Glen are two of the most prominent figures of CSS-in-JS, and they show how CSS-in-JS was born out of love for CSS, not against it.
So, we have come to the end. We have seen how there is war, but there is also peace.
This is my call for a truce. A call for me, for you, for every CSS developer or architect, for the whole community of front-end developers. But especially for you, that are reading this post.
I am not in the position to influence an entire community like ours. But I can try to convince you that there is a better way than fighting each other.
So, here are my suggestions:
Embrace the ever-changing nature of the web.
Be careful with your words: they can hurt.
Be pragmatic, non dogmatic. But most of all, be curious.
I want to close this story with one quote from Leo Tolstoy:
“The two most powerful warriors
are patience and time.”
So let’s be patient, and let’s give time to time: as usual the web will find its way.
Slides & Video
Here you can find the slide deck of the presentation and the video recording of the talk: