Sessions is temporarily moving to YouTube, check out all our new videos here.

Let There Be Peace On CSS

Cristiano Rastelli speaking at Front-End London in August, 2017
51Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

In the last few months there’s been a growing friction between those who see CSS as an untouchable layer in the “separation of concerns” paradigm, and those who have simply ignored this golden rule and found different ways to style the UI (typically applying CSS styles via JavaScript). This debate have brought division in a community that used to be immune to this kind of “wars”. This talk is my attempt to bring peace between the two fronts.


Transcript


Hello, my name is Cristiano Rastelli. I am a front-end developer and designer. I am a passionate web designer and developer. And I'm in love with systems architecture, style guides, and the atomic design. I like to work at the interception between business, design, and development. And I'm also in regard in the, of conferences, meetup, also I speak and organise some of them when I'm in London. I work at Badoo as Front-End engineer. I work in the Mobile Web Team. Badoo is probably the largest social network for dating. We have more than 350 million users across the world. And using Badoo, people can meet, chat, or date. And we cover all the possible platform, iOS, Android, Windows phone, desktop web and mobile web. And I work in the mobile web team. So this means essentially a browser, any possible browser on any possible device. Big fan. I'm also a big fan of Front-End London. It's been the first meetup I attended when I first moved to London four years ago. Since then, I've been in love with this event. I'm extremely honoured and also thrilled to be here tonight and speak in front of you. This evening, I'm here to tell you a story. It's a story of war, and hopefully of peace. It's a war of words, so I won't use mines, but those of the protagonists. Let's start from the war. But what war? This was the question that a friend of mine asked me the first time I told him that I wanted to prepare this talk. Maybe I'm the only one seeing this war. Maybe it's just my point of view. I share with you some examples of what I think is this war, and then at the end we can decide if actually it's a war or not. So let's start with the war declaration. Everything started with this. The war declaration was this slide. Who has seen this slide before? Please raise your hands. Huh, not many of you. Around 800,000 people viewed, have seen this slide on Speakerdeck. This is the opening slide of a talk in which Christopher Chedeau, a developer in Facebook, proposed a new approach, a new technical and methodological solution to the problems that he was facing when trying to use CSS at scale in Facebook. The solution that he proposed, and that he called CSS in JS, was a completely new different way to style the UI elements of an interface, in React but not only. And the thesis of this talk is that CSS has inherent problems, and that this limitation prevents CSS to work at this kind of scale. People went mad on this. I mean, from that exact moment on, the community was split in two. An intense debate in which on one side people was seeing the CSS as an untouchable layer in the separation of concerns parting, so content, presentation, and behaviour. But, on the other side, other people were simply ignoring this golden rule and was looking for different ways to style the UI, typically using JavaScript to apply CSS styles. The debate has become more and more intense everyday, bringing division in a community that used to be immune to these kinds of religious wars. Here are some examples of comments, reactions, and opinions that I have collected in the last year or so from well-known and respected members of the community. Jeffrey Zeldman, talking about an amnesiac community that will turn the web into a wasteland of walled gardens. Lea Verou, considering atomic CSS a joke. A language designed by assembly coders. Aaron Gustafson threw up a little bit after reading a blog post about the new CSS. CSS Tricks, one of the most known and important follower resources for CSS developers, dismissing these new technologies as a, just a way to avoid writing CSS. On the other side, things were not much better. React developers completely dismissing every possible argument raised by the CSS community, and labelling these arguments as groundless. Simply scare mongering intended to spread fear, doubt, and uncertainty. People bashing tools and methodology. The problem with BEM, BEM is a tool, it can't have problems. It's the way in which you use it that may be wrong or not suitable for the purpose. Dave Shea, comparing tachyons, a well-known function of the CSS library, to the worst web dev idea of all times. Now look at this tweet and tell me if you don't see a call to arms in them. We are blowing up the work of 20 years of thousands of intelligent, visionary humans. We are in the time where the majority of web dev folks simply do not know how to use CSS at all. Thomas Fuchs, looking at the separation of concerns in React and JS, and saying, okay everything went south. And the responses to these arguments, on the other side, are sarcastic, like in this one. Or even a fancy, what is this? Some kind of scale of values that automatically imply that if I'm using SASS or BEM as some kind of primitive. Thierry Koblentz, they considered harmful the opinions of some leaders of our community. Jeffrey Zeldman, well-known, with a rant. Kiss my classname. Nice pun. Non-semantic last names that refer to visual styles will always be a bad idea. Hm absolutistic, no? James Kyle, the claim that web documents are dead. Or be in favour of web applications. The CSS is broken saga. Now this is a series of articles that I have collected. Despite the titles, not all of them are against CSS or CSS in JS. But I'll give you just an idea. CSS is broken. CSS is not broken. CSS sucks. CSS is fine, it's just really hard. CSS is broken. It went on and on. Now I don't know how you call it, but for me, this is a war. And the landscape that they surround me, not great for the CSS community. But what is exactly the matter in dispute between these two fronts? Well essentially, there are people that see that these new approaches are against the principle of separation of concerns. They think that they are breaking the web, that these people are relying on excessive tooling. Essentially that these people use this kind of technology because they don't know CSS. On the other side, you have people that think CSS has inherent problems. That cascading, inheritance, global name spacing are the worst of all evils. Essentially that CSS doesn't scale and was never meant for this. If you see, both parts probably have good reasons, but they don't listen to each other and listen to each other's reasons. But this is not the first war. We have seen many wars on the web. Religion wars in the last 10, 15 years. Let me just recall you some of them. Early days of the web. The browser wars. Explorer versus Netscape. And Best Viewed With in the footer of every possible webpage. Dynamic HTML, people started to use JavaScript and scandal. No no no no. You can't use JavaScript in a webpage. A few years later, the rise of an unobtrusive JavaScript, and again, JavaScript should not be used with HTML. This one was really a religious war. Everyone was sure that Flash was going to kill HTML, but we don't know how this ended. Steve Jobs' letter was essentially the tombstone, the beginning of the end for Flash. And again Flash versus HTML. More recent years. The first JavaScript war. The war, the battle for the best JavaScript library. Then the rise of native applications, so the HTML 5 at the time versus Native. Again, Native application will kill the web. Well we know how it ended. The second JavaScript war. The battle for the best modern framework. The never-ending battle for the emancipation of JavaScript and HTML and CSS as real programming languages. Still on. But in the last few years, no more big wars on thqe JavaScript community. Only small scuffles. Too many frameworks, right? No. Too many tools, right. But somehow this worked amongst the JavaScript community and been put to an end with the advent of React. Now we have seen the CSS war, we have seen it's not the first one. So how can there be peace? Well I have a plan. And my plan is this one. Recently I started to ask myself. Why this war? What is causing it? I don't want to take a position. I think that there are good reasons and valid points on both sides on the contention. What I want to do is try to understand the reasons behind the war because, and do my part to stop it because if you know what is causing this war, maybe you can try to find a solution, or at least a truce. So let's look at the bright side. Let's look at the peace. What are the main causes of this war? Well definitely an important role is played by this dichotomy between documents and web apps. But it's not only that. There's more. Surely there's the factor of old generation versus new generation, and old generation developers telling to the new generation, no kids, don't touch. No no no no. This is not how things work. No no no. This is not how we used to do things here. No no no. And the new generation of developers, the cool kids on the block, using the word modern as flag, they are challenging the existing best practise, ignoring the experiences and the lessons learned, and the progress made by the community in the last 20 years. Sure. For sure there's a misunderstanding I would say, not given our view, of what is the definition of separation of concerns. Separation of concerns doesn't mean necessary, it's a separation of technologies. It's separation of context. That's why they are saying the same thing. But they are looking from two different angles, two different perspectives, two different point of view. And they are both valid, depends on the context. Up to this point, I've used the words of the other people, of the protagonists of the story, I would say this saga. I want to give my personal interpretation of what for me, is the main reason behind this war. And the reason is that the community of CSS developers is young, not CSS itself, it's 20 years old. But the community of CSS developers that work at large scale on large web applications, side by side with JavaScript developers, with designers, maybe in cross-functional teams, maybe on a big application. Keep in mind that web applications are what drives the industry now. Think to the experience, and everyone knows about Guardian, BBC, Financial Times. What used to be something which is document or content-oriented, we had this website, that are now very complex web applications, that led the way and paved the way of what will be the best practise and standards of the future of our industry. So probably CSS or the CSS community is undergoing some kind of metamorphosis that JavaScript developers went through years ago. When they move from some cool guys working on JavaScript to real professional developers with its own dignity and business impact, then the business values. Standard patterns and architecture then emerged and developers somehow stopped to fight some battles for the best framework. Everyone understood that the best framework is the one that suits you. Maybe that's what is happening to the CSS community too. We have CSS developers, a real role in a company, with specific roles, and as a community, we started to discuss about CSS architecture. How to use them in the specific context of web applications. Maybe we are simply too young a community in that sense. We never had the necessary discussions and conversations about who we are and what we want to do. Just to give a simple idea. The JavaScript community has solved the problem of the global name space years ago, and no one would argue about that to them. Also not everyone is willing to make war. There are a lot of moderate people out there. People that don't think only with prejudice, sometimes with bias. But a more positive, constructive approach. People that it's worked for follow and listen to. So I want to give you some example of them. Max Stoiber, he's the co-creator of cell components, one of the best, sorry, most known CSS in JavaScript libraries. CSS in JS isn't a campaign against CSS. Mark Dalgleish, co-creator of another well-known CSS in JS library, CSS Modules. Very active member of the CSS in JS community. Bright person, one of the brightest minds I've ever met. In particular, this tweet made me think about this idea of linear history. We look back at the history of the technology and the web and we think there is something linear. Oh yes, there was jQuery, then there was this one and then. Actually it's not what happens. This is not how evolution works, this is not linear. The survival of the fittest. We had multiple paths and we remember only the ones that survived. I love how Oliver Turner tweaked this image with some great irony. Another person for me to follow is Stuart Robson. Former London's Meetup organiser. He's absolutely right, stop blaming tools. Those are just tools, they are good or bad per se, no. It's how you use them, in which context, under which circumstances. A limitation, and maybe business needs. That makes the difference. Adam Onishi, probably some of you know him. I love this blog post in which he compares web development to a recipe for chilli. Every one has its own recipe and no one would say yours is not the right way to do it. Ben Frain, an endless source of inspiration for me. Web development is not something holy sacred, against which we commit a cardinal sin. Chris Coyier, founder of CSS Tricks and CodePen, suggests to avoid dogma, to show empathy for people doing things different than us. Lastly I suggest to watch these two talks, presented this year at CSS Conf EU in Berlin. They both show how much love, how much respect for CSS there is in the CSS in JS community, especially from the founders, from the most prominent members. The first one is from Mark Dalgleish, creator of CSS Modules. In this talk, he proves beyond any possible doubt, how CSS in JS is not against CSS, but it's a natural evolution. It's the consequence of the convergence, the cross-platform code base that nowadays we have. The fact that now they are becoming the source of truth, and styling, merging in this single source of truth, in CSS too, is becoming part of this process. Second one is from Glen Maddern, co-creator of CSS Modules and style components. In this talk, he tells the reason why he invented, or led him with Max Stoiber to decide to create style components. Mark and Glen are two of the most prominent figures in the CSS in JS community. And both with their talk showed how much love, how much respect, CSS in JS was born out of love for CSS, not against it. We have come to the end of this talk. We have seen that there is war and there is also peace. This is my call for a truce. A call for me, for you. For every CSS developer or architect. For every developer in general. Especially for you in this room this evening. I'm not in the position to influence an entire community, but what I can do is try to convince you that there is a better way than fighting each other. These are my suggestions. The web is an ever-changing medium, based on continuously evolving technologies. Embrace it, embrace its nature. Be careful with words, they can hurt. Be pragmatic, not dogmatic. Most of all, be curious. I leave you with these words from Leo Tolstoy. Let's give time to time, and the web will find its way. And win anyway, as we know. That's it, thank you.