On the origin of cascades

Hello, this talk is about the evolution of CSS. Last year, it was about 25 years ago that the first proposals were being discussed. That’s a long time. And there is a lot of interesting history to go through there. Before we do that, we’ll go into evolution itself. And I’ll look at some of the work of Charles Darwin who famously published the work “On the Origin of Species… …by Means of Natural Selection.” I ended up reading this when I was at uni, I was late signing up for different courses for when it was doing my degree and I had no choice but to pick this course, that kind of consisted of reading the full works of Darwin and kind of studying evolutionary theory and some other people of his time.

In any case, I haven’t introduced myself. I’m Hidde. I am a freelance front-end developer and accessibility specialist. And so I worked for all sorts of organizations trying to get their front-end code right, or their accessibility or combination of those things. I do tweet on @hdv and I blog. I was told I am allowed to plug my thing so that’s what I have. It’s a blog! hidde.blog is a URL you can follow and have a look. I write mostly about HTML, CSS, JavaScript, components, and accessibility.

Let’s get into it, let’s get into Darwin’s theory. And let me give you a brief overview of his theory first. Now, Charles Darwin was originally schooled in medicine, but he ended up graduating as a geologist in Cambridge.

He was lucky to be invited to join a five-year trip on the HMS beagle, which started when he was only 22 years old. So he was really young and he was invited to come on this trip that sailed around the world. Now we know a lot about this trip because he kept notebooks and he wrote down a lot of his experiences there.

They went to lots of different places. But a specifically important thing for his journey was that they ended up at the Galapagos Islands. They only spend about a month or so there, but it was particularly relevant part of the trip for Darwin. One of the reasons is that in this area, besides that it is stunning, this is a photograph of it, it looks amazing, there are lots of different species there that weren’t anywhere else in the world.

Darwin took lots of specimens and sent them home to England to maybe study them later. And looking at those specimens, when he had returned home, he realized that there was a lot of variety in the species that he had collected. For instance, between a number of different finches. And this example is famous when you look at the work of Darwin. Between a number of finches, he noticed that there was differences in their beaks. Now he had this hunch that it might have something to do with the fact that they lived on different islands.

The Galapagos Islands is this group of islands and Darwin had this hunch that the reason that there were so many different species and different finches was that they had adapted to the specific islands they lived on. The islands had different amount of food available, different types of food available, and perhaps the reason that they’re beaks were so different was that they had different circumstances that they lived on.

He figured that these species must have changed over many, many generations. And this is a phenomenon that he called descent with modification. And we now refer to that as evolution, a word that you don’t really find in Darwin’s original work, but that’s what we’ve started to call it now. And he claimed as well that this descent was from a common ancestor. So then, you know, maybe there was one type of finch and all these different finches, they all had derived from that one common ancestor. a

He believed that the best way to represent this would be in the form of a tree. And he visualized that in one of his notebooks. The common ancestor, he called that a tree of life. He didn’t really know at the time whether his hunch was correct, whether it was the case that all these species came from the same ancestor and that there was some kind of selection going on. But later he figured that it must have something to do with selection.

The reason in the years after his journey, Darwin worked with a pigeon breeder and he saw that the breeders spend a lot of time selecting individuals with features that were preferential features that would maybe sell best because they would sell the best pigeons. And they would have to figure out what that looks like. So they would kind of select the ones with the features that they wanted to keep. They had a process, basically, to produce an ideal breed and it was called artificial selection.

Now, looking at that process, Darwin realized that something like this must be going on in nature, but it would be called natural selection. The breeder select the breeds, maybe nature selected species based on whether they were most fit for their environment. And with this, he had found a mechanism by which evolution, that he thought was a mechanism that existed, could be explained.

Now, Darwin talks about inheritance and ancestors, tress, classes, selection. Where does that leave CSS and the web? These are all things that are very familiar to us, but we used it in a completely different way when we look at the web. And no worries, we’ll go to the web right now.

Where it all started on the web was websites without style. Web documents were just structure and browsers would decide how to present them. And that seemed fine originally because it was used in a scientific environment where people cared a lot more about the content than about what that content looked like. It was also like a feature, the browsers worry about the style. we just worry about the contents. But when the web got more popular, people started asking about styling because they were used to word processors where they could change what fonts look like, or what colors look like. So they wanted something like that on the web, why not? And at that point, people started to put out proposals for that very thing. How could we use style on the web?

And one way to get style on the web and HTML documents is to do it right there, having style attributes and elements to HTML. The Mozilla browser, later Netscape and then Firefox, introduced tags like the <center> tag, which put things in the center of the page. Oh, and the <blink> tag, let’s not forget about that one, presentational elements. Multiple people independently arguing that separating style and structure would be a feature super powerful to lose. People didn’t really buy it because they were afraid that this separation between structure and style would be a feature too powerful to lose. So people started doing other proposals on the mailing list, WWW Talk.

One of those proposals was Rob Raisch’s proposal, which had abbreviations for all sorts of typographics and things like FO for font, and FA for family, SI for size. Because it had those abbreviations it was a little harder to read unless you knew what these things stood for.

In the proposal he talks about closely resembling the creator’s vision, which I think is something we see in other style sheet proposals as well. Many people will criticize CSS. They feel like it’s not doing exactly what they want. But the thing to realize is what, especially when you study the history of CSS, is that it is very, very hard to understand exactly what the creator wants. And it is specifically hard on the web where what the creator wants is not always what is right for the user. And we’ll get into that in a bit more detail later on.

There was also Pei Wei’s proposal, which got implemented in the experimental ViolaWWW browser, which Pei Wei created. And this proposal contained a mechanism for inheriting properties to avoid repetition. It keeps the description short, wrote the author. So that was rather interesting. You could select for body saying what a font size should be or a color, and it would get inherited by children of the body like CSS does in the current day. There were other proposals as well that were a whole bunch more complicated.

The Document Style Semantics and Specification Language. It involves a tree transformation process in which you can manipulate the structure before style is applied. And it has a formatting process that lets you associate elements in the source with elements in the target’s rep presentation. And this is quoting from a paper that talks about DSSSL in some detail. Some advantages are that it works outside HTML so it works for other SGML languages. It has powerful querying. It was already being standardized at ISO, but there were also problems like it was hard to use on the fly, and it seemed rather cumbersome to use with HTML, the main language that people were using for the lab.

Now another proposal, and this is by Bert Bos, who ended up being one of the main inventors of what we now know as CSS, Bert Bos’ stream-based style sheet proposal was pretty interesting too. It allowed selecting direct children and descendants, it let you use the value of an HTML attribute right in CSS, a bit like the attr function that we have in the current day. It had a concept of inheritance, if one element is left align, the others inside of it will be too unless specified otherwise. It allowed you to set the type of quotes you’d like when you use a <q> element. Don’t know if people here use the <q> element a lot for quoting. Here you could set like French quotes or English quotes or those sorts of things. It even at very early media query like stuff. So you can do things based on how big your screen size was. And there were some ideas around how to deliver CSS, like through a new HTTP header or a link element, which in his proposal Bos said that it wouldn’t be ideal because it would arrive late because it would be part of the document itself.

Now this proposal was written at a similar time as something else, called cascading HTML style sheets. This was a proposal Håkon Wium Lie did, and later Bert Bos joined forces with Håkon Wium Lie to work on one standard for CSS because they found there were many similarities between their proposals.

This proposal had interesting things like time awareness. So if your document is older than three days, let’s give it a yellow background.

Or things based on display height or, you know, the size of the screen that you’re looking at, you can do a completely different style sheet.

Then there was a principle of weighted influence, which I think is interesting. And it reverts back to what I talked about before. Browsers would decide what website look like in the web without style. Style sheets could give website designers influence, but also users. And cascading HTML style sheets try to find a way to let all those different preferences get their weight in some sort of calculation. The browser could make decisions about what stuff looked like, users could and what designers could as well. It worked with percentages, in the case of cascading HTML style sheets. So you can say how important this specific declaration was and then the weighed average would be applied in the browser. It would be easier to do in numbers than with things like font styles, because what is 20% Helvetica and 80% Times New Roman? That would be quite weird. Design is far too subtle for that, said Bert Bos in response to that.

People were quite excited though about cascading HTML style sheets. They liked the separation between semantics and presentation.

They liked the cascading effects and were intrigued by it and figured that, you know, it might be tricky for these styles to get clashing. Now it became apparent that style sheets needed their own mailing list. So Bert Bos wrote a charter for this.

They arranged to have a mailing list at the W3C and they wrote a charter in 1995 with a bunch of different requirements for CSS. There are things like this language should work not just for screens but also for paper and braille and speech. So it really wanted to look beyond just the single use case. It we need to apply beyond HTML. It would need to allow for real-time formatting and incremental formatting. So if you do things like change of style on the fly, maybe through JavaScript or in your dev tools, that would still be able to apply.

Soon after this charter, a workshop was organized in Paris. There was some interest from browser developers. Internet Explorer 3 was actually the first to implement some part of cascading stylesheets just before it got standardized in a level one recommendation at W3C.

This level one contained things like selectors and declarations and included ways to relate styles to HTML like the link tag, like inline styles, all these sorts of things. It allowed you to group selectors with a comma so that you could apply the same styles to multiple things. It had inheritance. So you didn’t have to specify every style for everything. It had pseudo classes, pseudo elements, even first line and first letter things. The cascade was there so the idea of weighted influence got worked into a proposal for cascading. There were different formatting models like blocking in line, and there were lots of properties that we recognize in CSS today. So level one had loads of things that we will still recognize today and that are still part of CSS today. Now just after that, the CSS working group was found in February 1997, which started work on a level two specification. In the meantime, more browsers started to add support for CSS as well, making it a real technology ready for mass use. It went into Netscape navigator, it came into Internet Explorer 4, Opera also was interested in implementing it and put some of that in Opera 3.5. And later in 1998, CSS level two got published as well, which brought us things like positioning and tables.

Workshop in Paris IE3 1996 Level 1 Recommendation IE4 CSS WG 1997 Netscape Navigator Opera 3.5 1998 CSS Level 2

The inventor of the spacer GIF, David Siegel, wrote a post in which he argues, you know, we should say goodbye to the single-pixel GIF, we should no longer put our text into tables, We can use tables to lay out our pages, but in a year or so, we should be able to give that up. He’s urging people to learn to use style sheets today, but there were a lot of people arguing at the time that, you know, CSS was ready to do your style on the web if we put stuff using tables, and we could really start using CSS.

As CSS quickly developed, so where it was one specification in level one and two, and became lots of different modules. So numerous modules for each different part of CSS, like there is a module for grid layout and a separate one for flexbox. What changed as well, is that a lot of different people joined from different companies putting in their perspective. And there was input from developers and designers worldwide, which is still the case.

Now I won’t go into everything that changed in CSS, but I wanna go and mention three things that I think are particularly exciting from the last few years. We now have powerful layout in CSS, so we can do flexbox and Grid Layout, which is really cool. We’ve got modern layout basically. There’s custom properties, which are awesome. And with Houdini we got finally access to the style layer, like Service Workers opened up the network layer to JavaScript. And with Houdini we got access to the style layer.

Darwin found that there were certain traits in birds that help their specific variety survive over many generations while others did not. They were vested definite for survival on a particular island that they lived on to their environment. We know that CSS is still out there as the language to style the web. So let’s talk about some of the features that made this language so well-adapted to it’s environment, the web.

So at CSS Day 2017, the organizers had invited Bert Bos and Håkon Wium Lie, who were among the first people to write specifications for CSS. And one of the things that I learned in that session is that simplicity was really one of the main design principles of the language. They really wanted to make sure that everyone would be able to use it so that the language would get more popular.

. Bert Bos also talks about that in an essay he wrote called What Is a Good Standard. “You sometimes hear people say that “syntax is not important. “That’s not true. “Syntax is one of the most important things there is.” And although CSS has a simple syntax, it isn’t necessarily simple. A lot of people simple write. You can set a color or font, some borders, and it was super intuitive to do those kind of basic things. So if you had a scientific document and you wanted to make sure it had consistent styling, that was easy to do, but there are also very complicated things like the formula for specificity and the box model

Arguably any model that deals with spacing has to have some level of complexity. And there is syntax that only work in specific cases. Like that you can only use in line items on a flex container or a grid container.

hout out to the Firefox Dev Tools… which helps you understand these parts, you see it as with targeted tool devs, that explain you’re using a property that doesn’t make any sense in this context for instance, align-items in an element displayed ‘block’.

And the cascade is also extremely relevant to CSS’s survival. Some people hate on it but one thing to say about the cascading is that it really allows us to keep our style sheets small.

t allows for medium-independent HTML. Because if you write everything in HTML, and you don’t have any styles in your HTML, because you’re able to put those styles into a separate style sheet, you can reuse that HTML for lots of different use cases. For instance, you could publish a book with the same HTML that you’re using to publish a website and a mobile sort of thing. And the only reason that is possible is that CSS is completely separate. It is enabled by the separation of style and structure.

All right, this one is controversial. Don’t turn off the stream just yet. I will explain. But you could say that one of the advantages of CSS also, and that has kept the barrier real low, is that CSS is not a programming language. At least it wasn’t meant as such by one of its inventors, Håkon Wium Lie. Who said if he had turned it into a programming language. it would have been, yes, more powerful, but it would come at a cost because programs are difficult to read and expensive to maintain. So creating a declarative language rather than a Turing-complete programming language was actually a feature, not a bug. And something they really did to make sure that many, many people could use it. They have a very low barrier to entry. And of course you could say that fluency, this is where one language, this is all about definitions.

“[We created] a declarative language expressing constraints, rather than a Turing-complete programming language. A programming language would have been a more powerful solution, but it comes at a cost; programs are difficult to read and expensive to maintain!” Håkon Wium Lie Håkon Wium Lie, “Cascading stylesheets”, 6.10 CSS in context (https://www.wiumlie.no/2006/phd/#h-321)

And of course, some disagree about this question. Laura Schenk did a fantastic talk about this at CSS Day 2019, looked at whether CSS is Turing-complete.

Video: Laura Schenk, “Algorithms in CSS”, CSS Day 2019, Amsterdam (https://vimeo.com/349405859)

Ana Tudor also showed that you can do logical operations with CSS variables. So yes, of course you do the programming languagy stuff in CSS.

But the point I want to make here is that it is really important that CSS wasn’t language with a low barrier for entry for its survival, that is the reason we’re all still using it because it isn’t that hard to get into. And then the last thing I want to note, why I think CSS is so successful and why CSS has grown to be the language that it is today.

Article: Ana Tudor, “Logical Operations with CSS Variables”, CSS Tricks, 11 September 2019 (https://css-tricks.com/logical-operations-with-css-variables/)

It’s actually something that Rachel Andrew tweeted recently. Last year, she said it would be so easy if all we did was create solutions for a single use case. You can use CSS for multiple use case. That is what makes this language so, so great because it addresses things like internationalization, flexibility, and those things are very hard to address. That’s why it takes so much time to develop the language into what it is today.

Now, the web didn’t stand still between 1996 and today. So let’s look at some of the things that really influenced style on the web.

More professional graphic design for the web

Well, one thing that really changed is that graphic design radically transformed. It has gotten a whole lot more professional. It is no longer styling that scientific paper and, you know, putting some color on and changing some fonts. It’s more about covering colors and components and grids and typography. And yeah, the world really changed when it comes to graphic design on the web.

There’s also a lot more unknown content. Content sometimes changes in real time. Content is increasingly user generated like on social media. People put on a new tweet and a styling for that tweet is already defined before the tweet itself exists. That’s really exciting about graphic design on the web today and probably different from when the language was being invented in 1994. They knew what the content looked like before.

Something else that changed was we really think different about components on the web.

So where before we would maybe have separated between HTML, CSS and JavaScript. We increasingly think about a separation in terms of components. So we separate between what a button is and what a profile picture is. And maybe that is a sensible way to think about stuff. And maybe within them, you would still separate between HTML, CSS and JavaScript. So there would be two separations indeed, but yes, we separate our concerns differently these days.

And the last thing that really changed is tooling. When in the early days you would just write CSS without any tooling, I see increasingly at web themes that they have elaborate tooling that generate their style sheets, using pre-processors, post-processors, any of those kinds of things. So we have a lot more tooling.

Now how has CSS adapted? As we saw in Darwin’s theory, the species in nature adapted to the environment through generations. And we just looked at how the web changed. And we looked at how CSS has really been a great language overall. And let’s now look at how CSS has adapted to make the best out of those changes in the web. Now, I already mentioned earlier that a lot of the CSS that we know today actually existed in the late ’90s and a lot of cool things have been added also recently.

People like to complain about CSS and make things like this, where it says CSS is awesome in a fixed size box. But this really demonstrates that CSS has options for you.

You can choose to make the box grow with the content if it doesn’t fit.

Or you can choose to cut off the content so that the box stays the same size, but the content is cut off at the edge of the box.

These are all options that CSS offers and that you can use or choose not to use. In other words, CSS is fine. It has done really well. And if we look at the evolution of the web, CSS has really developed alongside of it. But there is clearly people that use CSS in different ways and people that have adapted their approach to CSS in a way that fits their specific environment.

Utility classes are a great example of that. When I first saw them, I was quite surprised by them, but it is how a lot of people use CSS these days. It’s almost like reimplementing properties but in class names. Without any value judgment… This is kind of using CSS without the advantage of separating content and style.

Johan Ronsse said it’s a bit like a set of predefined design tokens, he said in a blog post called Thoughts on Tailwind CSS.

Now Tailwind is a popular tool that does that and will generate utility classes for you. And it has proven really effective for some web teams.

But like I said before, it kind of gives up the separation of content and style, but it gives people scalability and maintainability, and maybe for some themes, that is exactly what they need. So they may have adapted CSS successfully to the needs that they have.

Now another example of adapting CSS for your specific environment is CSS in JavaScript. It has been gaining popularity, especially in large organizations like Twitter and Facebook.

And of course, I’m not talking about dynamic powerful abilities of JavaScript style sheets, which was a proposal implemented by Netscape almost 25 years ago, just after CSS level one came out. The blog post says JSSS is little more than a cumbersome syntax that emulates the functionality of cascading stylesheets. There’s some nice features of JSSS that makes that unwieldy syntax worldwide. So, okay, that’s an interesting approach. It’s not what we’re talking about.

What we’re talking about is things like React Native for Web, styled-components, CSS Modules, Emotion. These are all tools that thank CSS to JavaScript and gave some very specific advantages. And people don’t do this because they hate CSS.

Max Stoiber of styled-components said that CSS isn’t a bad language, it is awesome.

Mark Dalgiesh, of CSS Modules explains that managing CSS at scale is all about picking a reasonable subset of the language. That is what people do here. They don’t use all of CSS because they feel like there is stuff wrong with some of CSS, and they try to really use the subset that makes sense for them and their organization.

Now there are some consequences in some of these differences using JS solutions. For instance, they remove specificity, which is a useful feature. And if you don’t have it, you will need to find different ways to solve the same problem. It sometimes removes the cascade so that you no longer have this phenomenon that people refer to as leaking. But again, you don’t have the advantages of the cascade, which makes you really write a lot shorter style sheets. You no longer have class names in some cases, which may be great because you don’t need to invent class names anymore. And some of these systems, you no longer have the ability to use pseudo classes.

So basically you have less features and then get something that is a whole lot more predictable. And this is exactly what big companies are looking for. And it may be a solution for the company that you work at. It comes with problems, though, it comes with big problems sometimes.

An example that did the rounds on Twitter last year was this example of Twitter’s own close button. Ana Tudor decided to take apart the CSS for that. She found that there was really 200 CSS declarations in this. I’m not value judging but that’s a lot for a framework that claims to optimize how much CSS is sent down the wire. Now I have to say, I don’t have personal experience with React Native for Web, which was used for this.

Ana Tudor, “The twitter “button” abomination (base state ONLY)” on Codepen (https://codepen.io/thebabydino/pen/BaaJmoq?editors=1100)

I did watch former Twitter developer, Nicolas Gallagher, talk about rationale for and the benefits of using React Native for Web. And he emphasizes that the reason that this team went for this route was not because they misunderstood CSS. They understood it. He wanted to make that very clear in that talk. And I found it interesting because I do see a lot of things in this example that maybe show that CSS isn’t used as efficiently as it could be and maybe as it was meant to be.

Now reasons that Gallagher and others quote for using CSS and other people that use CSS in JavaScript, is that it provides them with a stricter contract between a component and what that component looks like. They say that maybe the UI is the organization’s main product. So it is very important that they are extremely sure that the UI looks the way it needs to look. They say that the DOM is only one of the many outputs and they create things like apps as well, that need to have the same styling. And then they say it is also easier to maintain. Now that’s something I don’t really have insight into because I’ve not worked at Twitter. So I don’t know if there’s stuff that their developers look at is incredibly maintainable and nice to look at. What I do know is that the output isn’t so great, but I guess we can’t judge a product by its output alone.

One question to ask though, is does CSS really lack in contract strictness? I think that’s a bit of an accusation that I don’t know if it makes sense. I think the contractor that CSS has is pretty strict. It is not necessarily simple because there are complicated things like the cascade at play and specificity that might be hard to learn. And that require a lot of spec reading to really get right. But once you do that, I think the contract that there is, is very strict indeed.

So I don’t think that the meme CSS is awesome, that might be funny at first, but it may be explained because the overflow property just works as spec. The only thing is you need to learn and understand it, but that’s the case with any kind of programming language or language in general that you’re trying to learn. So I don’t know if CSS lacks in contract strictness. My initial judgment is probably does not. It probably is fine.

So let’s go into conclusions then.

Going back to Darwin, Darwin found that the finches and other species that he studied had adapted to the environment that they lived on. And I see CSS does the same. It survives by having people adapt CSS to their specific needs. It survived many, many generations over 25 years ago, and it survived many improvements to the web. It adapted by adding new tools that really helped do things like layout and gave advanced control over the browser’s style layer with things like Houdini. And it is clear that it has been fit for its environment like the birds in Darwin’s theory. And then it continues to be fit as well. Many people are adapting it to their environment. That’s probably fine. So some people find that they need to really put that CSS in their JavaScript, some people feel they need to use an elaborate system of utility classes and others choose to just use Vanilla CSS. The message I really want to give here for anyone who needs to hear it, there is nothing wrong with any of these approaches, because there are so many ways to look at their benefits. Maybe your organization benefits from utility classes. Maybe it does not. Maybe you like writing Vanilla CSS and that’s fine and perfect for your environment.

So all I want to say is CSS is awesome and continues to be awesome over 25 years after the first draft. That’s all they wanted to say.

Thanks so much for listening to today’s talk. The slides can be found on talks.hiddedevries.nl. They should be published at this very moment.

For any questions, feel free to join the Q and A, that will happen right after this talk, and or send them to @hdv on Twitter, which is me. I wanna thank Bert Bos, Darice de Cuba and Erik Kroes for their help in creating this talk. Now, thanks again for listening. And I’ll be showing up for a live Q and A right now.