By Louis Lazaris

CSS is Alive and Well

By Louis Lazaris

Due to the ever-growing popularity of React, Facebook’s user interface library, there has been some discussion on the topic of CSS and whether or not it has a future in its current form — that is, in the form of declarations in a separate stylesheet that provide presentation information for a given page or section of markup.

I’m not going to rehash the conversation or the pros and cons here. For those not familiar, here are a few links you can check out:

But what I will do is provide some strong evidence that CSS is alive and well.

The developers are restless

When I read the reactions and heated debates in comment sections of articles like this one or this one, two things become clear:

  • Developers are passionate about CSS
  • Developers are not happy with some of the proposed solutions for large CSS projects

The two links in the second bullet point in the introduction above are a slide deck and video presentation by Christopher Chedeau, a developer working for Facebook on the React project. This past week was the first time I tried delving into React a little bit, thanks to this great tutorial by Shu Uesegi. After that simple introduction, the slides gave me a little more context.

Christopher addresses 7 CSS architecture problems that he believes can be solved by using JavaScript to manage and implement styles. This is the kind of thing that makes a lot of purists shudder because, with React, you’re basically writing your markup and styles in your JavaScript — something that’s usually discouraged in keeping with “separation of concerns”.

The screenshot below captures one of Christopher’s pertinent slides in this regard, outlining the 7 problems that React attempts to address:

CSS problem solved by React

Christopher makes a great case for solving CSS’s problems in JavaScript, so I highly recommend you keep an open mind and check out his slide deck (although I’ll forgive him for saying that w3schools is his favorite website for learning JavaScript!).

So it’s clear that it feels like a CSS revolution is needed and some might say it’s already under way. But it’s also clear that CSS in its current form is not going away anytime soon.

CSS tips and tricks are in high demand

If you were keeping tabs on your RSS feeds and Twitter stream in the past week or so, then you probably came across my most recent CSS article. That was one of the most enjoyable articles to write, and judging by the incredible response in the comments and on social media, I’m glad to see that it was as enjoyable for readers.

12 Little-known CSS Facts: The Sequel

Artwork by SitePoint/Natalia Balska.

The popularity of those types of articles demonstrates that developers still love CSS in its traditional form. Tweets by Ilya Grigorik, Smashing Magazine, CSS-Tricks, and others were shared and favorited hundreds of times. And the traffic to that article and its predecessor has been amazing.

The content in my articles is mostly covering stuff that’s been available in browsers for years, not just the new “CSS3” features. In fact, I intentionally tried to use as many cross-browser CSS tips as possible and the response has been overwhelming.

But this sort of thing is not unique to my article. Consider past CSS articles on other sites that have been hot in the community. Two that immediately come to mind are, not coincidentally, both by Heydon Pickering:

Readers eat that stuff up! CSS developers of all levels, and even back-end developers, are sure to enjoy that kind of content. It has a special appeal because it’s unique and it demonstrates that there is always something new to learn in CSS. I don’t know what the traffic numbers for those articles were, but I’m sure they were very high in comparison to other articles on the same sites around the same time.

CSS books are in high demand

Last month, Lea Verou, known throughout the industry for her CSS secrets conference presentations (first and second) has written a book for O’Reilly based on her popular “secrets” premise.

CSS Secrets book by Lea Verou

Her “secrets” presentations have been a few of the most shared and popular presentations from the conference circuit over the past 5 years. No wonder she’s used that premise to spawn a book project.

As of this writing, Lea’s book is ranked in the top 3,000 books overall on Amazon (that’s all books included, not limited to web development) and it’s in the top two or three in a number of different developer-specific Amazon categories.

Again, this demonstrates that CSS in its current form is still in high demand and is not going away soon.

Similarly, here at SitePoint, we’re still pumping out lots of CSS content in the form of books and courses on SitePoint Premium (formerly Learnable). Some of the most popular titles available on SitePoint Premium are the CSS-based content. And there’s more CSS content in the works. So the demand is not slowing down.

SitePoint Premium's new CSS content

React won’t kill CSS

As Chris Coyier pointed out in his post (linked above in the intro):

Nobody is saying we don’t need styles. We still need to style things, what’s being talked about is how and where we do that.

This means that even if the industry caught on with stuff like React and we began generating our markup and styles in our JavaScript, we’re still going to need to study CSS, learn new tricks, and uncover shiny new little-known facts. We’ll just be managing them in our JavaScript instead of in separate stylesheets. A poll that Chris is currently running on CSS-Tricks also indicates that most developers don’t like what React brings to the table in terms of CSS.

CSS-Tricks poll

And it should also be noted that there’s a lot of important stuff that React doesn’t handle well. So we have a long way to go before we hang up our .css files and move everything into our scripts.

Final thoughts

Part of the popularity of CSS is the fact that it’s easy to learn but hard to master. When CSS becomes intermingled with JavaScript, the “easy to learn” part starts to disappear. For that reason alone, I think we’ll always have traditional stylesheets. But some front-end engineers might simply choose to use more advanced options to deal with the challenges that Christopher Chedeau attempts to tackle in his slides.

That’s my current and probably somewhat ignorant view, based on some of the things I’ve been observing over the past week. What do you think? Can traditional CSS coexist with React-like implementations? Or is React’s current model just a fad that will likely evolve to something more in line with what we’re used to? Let me know your thoughts.

  • seba

    What a completely stupid article. Even if you manage all the styles in JS, the styles are still CSS.
    So it’s just about using css selectors and classes vs inlining css.
    And it’s not really due to React either. This is a long-standing discussion. Angular also has seen similar discussions. And other new frameworks as the new BEST approach, also pushes inline CSS. But CSS selectors are only a tiny part of what makes CSS.

    • LouisLazaris

      Even if you manage all the styles in JS, the styles are still CSS.

      Which is what I said in the article. The article is about how CSS is managed/implemented, and whether it’s a good idea to let libraries like the ones you mentioned do that management. That is, CSS in traditional form vs. these new methods.

    • You didn’t read the article, did you?

    • chantastic

      Style rules predated CSS. CSS is just one way to write styles for markup. Styles can be written in markup or adjusted in the DOM via JavaScript. CSS is NOT synonymous with style. CSS is predominantly the selector portion and resulting specificity rules. This misconception is what makes it difficult to have a reasonable conversation about styling in any other language.

      • seba

        AFAIK style rules were part of CSS version 1 since 1996, before that, styling was being done by separate html attributes.

        CSS is the umbrella above all of these specs: , of which the selector portion is only a small part.

  • Zlatan Beogradlija

    Hey, even the most inteligen people make mistakes.

  • Thoughtful piece, @LouisLazaris:disqus. There are certainly advantages to wiring CSS directly into JS. I wonder if there might end up being an intermediate step where local raw CSS/Sass is written and tested. When this signed off, it gets extracted into React or an equivalent for shipping.

  • Tim

    I’m happy to see such a well thought out article on this topic! I haven’t worked on sites like Spotify or Walmart, but I can’t imagine it’s impossible to manage their CSS problems without writing CSS in Javascript. I think this is all a result of software engineers finding it hard to grasp the concept of CSS, and how it should / shouldn’t be used. All in all it seems like over-engineering a solution to a problem that might not actually exist. Anyways, great work as usual!

  • Antonella

    It seems to me it’s a new way of making CSS rules communicate with the HTML document content, therefore, as @LouisLazaris:disqus has pointed out, CSS is not significantly affected: you still have to learn it. What confuses me is that just when CSS is getting more and more sophisticated so as to be able to reclaim some of its own terrain that JS had temporarily invaded (and more to come is in the works for the future), we’re talking about writing CSS using JS or some other technology (pre-processors are also a case in point). CSS is still evolving, and other technologies aiding the way it’s written or injected are most welcome, but I’d consider them (hopefully, but this is my personal taste) as placeholders until CSS gains more capabilities.

  • M S i N Lund

    I think we should add functionality to CSS so that it could replace JavaScript, and HTML, and there should be a server-version of CSS so we didn’t need PHP and all that slow bloated old crap.

    That way you could leverage your knowledge of CSS, and just use that one language everywhere.
    High five!

    Just kidding!
    Could you imagine?


    • LouisLazaris

      lol… I actually thought you were serious at first.

  • Stardrive Engineering

    Like the idea of style rules being in their own file, for exchanging them, etc. Do not like the idea of co-locating way to many things under one roof (component) the way React does. Do like to have style rules right where they are being used when building DOM partials in JavaScript objects.

    To satisfy all this I think the stilr API is pretty well perfect:

  • Kristian Jensen

    Grate article. And while we are at it – could we drop the DIV based layouts, and go back to TABLE design. It was so much easier :-)

Get the latest in Front-end, once a week, for free.