The True Advantage of CSS

Published on September 8, 2009 (↻ February 5, 2024), filed under (RSS feed).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

Despite CSS being around for a long, long time, there are still some myths around it. Reading Mike’s post on CSS evangelism again I couldn’t only relate to Mike’s concerns, I also felt reminded of what I’ve been… saying in a lot of talks and discussions: The advantages of CSS tend to be misunderstood.

The main advantage of CSS is that it allows to separate concerns; it makes documents and their presentation more maintainable. End of story.

Much of what’s otherwise said follows from this. The accessibility card doesn’t count as there’s no correlation between use of CSS and accessibility. That is, a site defining all presentation in style sheets must not necessarily be accessible, and a site jam-packed with presentational markup making no use of CSS whatsoever must not necessarily be inaccessible.

The performance card won’t necessarily win anything, either. There are situations when going for presentational markup and making no use of external style sheets (which also mean at least one additional HTTP request) even offers faster load times.

Similar with the SEO card. The mere use of CSS doesn’t mean anything for your HTML. The markup can be garbage, it can be gold.

The cost card, speaking hosting, is not an ace, it’s more like a 7 or 8. Hosting costs depend on other factors than use of CSS. Hosting, let’s face it, is not expensive anymore.

The job security card, to explore what else is also regularly expressed, is a different animal. People who understand web development would focus on and hire only capable web developers who thus, yes, are able to write decent CSS and equally solid HTML (and maybe have a website). Given that and that web dev and hiring managers learn from mistakes, too, CSS expertise should mean some job security.

The maintainability card—which includes the “faster|cheaper|cooler redesign|relaunch” ones, and so here I disagree with Mike—wins about every single contest. No matter how crappy the HTML code is, CSS (and here I’m, for simplicity, boiling CSS down to external, centralized style sheets) always makes maintenance easier and cheaper. The practical impact can vary a lot, from “barely noticeable” to “wow, you did this all by just updating your style sheets,” yet just linking an external style sheet can already help maintenance. And being in this situation is the main advantage of CSS.

More on maintainability? The maintainability guide shares a few additional ideas.

Toot about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (where applicable) or a message.

Comments (Closed)

  1. On September 8, 2009, 11:55 CEST, Daniel said:

    Very concise and agreeable.
    Too many ‘card’ metaphors though lol.

  2. On September 8, 2009, 15:42 CEST, Jan-Christoph Borchardt said:

    I totally agree, and that is precisely why I could not understand your stance on CSS variables.

  3. On September 9, 2009, 1:36 CEST, Dale said:

    Sold!
    I definitely agree with what you’re saying about CSS.
    I think separating content from presentation and functionality are keys for cross-browser and cross-device web design. This is what I always say, Clean Code = Happy Code and that’s what CSS let’s you accomplish.
    Good Post!

  4. On September 9, 2009, 5:40 CEST, Aaron said:

    I agree that the separation of concerns is the only win.

    The accessibility and performance red herrings are only trotted out by people who stake their careers on being able to create a three column layout without using a <table> tag.

    One thing that can be done to improve CSS performance without using a nasty preprocessor that munges your files is to use PHP includes (or the equivalent in whatever template language you use) to add your css and js files inline, so you still get the benefits of separation on development.

    use, e.g.:

    <?php include("styles/my.css"); ?>

    instead of:

    <link rel="stylesheet" type="text/css" href="styles/my.css">
  5. On September 10, 2009, 16:05 CEST, Edgar Leijs said:

    I totally agree what is being said. It’s all about the DOM!

  6. On September 16, 2009, 8:31 CEST, Niels Matthijs said:

    I almost agree đŸ˜Š

    I’ve worked on some sites (incredible flakey html structures, no logical use of classes and differing html structures for exactly the same layouts) which were impossible to handle with css (external css file). Changing an element on one page would create unwanted effects on other pages without any means to differentiate between the two.

    I admit that these cases are rare, but if the html is too generic or simply not consistent than css can become bothersome rather than helpful.

    Otherwise good article

  7. On September 17, 2009, 23:06 CEST, John Faulds said:

    In the early days of web standards evangelism, because many tables-based developers were so fixed in their ways, the focus changed to trying to persuade site owners as to the benefits of using CSS.

    If you said the only benefit was:

    … it allows to separate concerns; it can thus make documents more maintainable with respect to their appearance

    you’d get a response like: “Oh, that’s nice… um, what does that actually mean?” And so these other arguments, designed to appeal to the concerns of an average client looking to have a website built, were formed. Now that the web standards movement has developed a strong foundation, they’re probably not needed anymore.

  8. On January 4, 2010, 10:59 CET, Richard said:

    I would agree with this in general, although I do think there are some circumstances where it wouldn’t be true, for example a single page website with only a moderate amount of presentational HTML markup would be more easy to maintain than if the presentation was separated out to a separate CSS file.