The True Advantage of CSS
Post from September 8, 2009 (↻ June 5, 2021), filed under Web Development.
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.
I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have questions or suggestions about what I write, please leave a comment (if available) or a message.
Very concise and agreeable.
Too many ‘card’ metaphors though lol.
I totally agree, and that is precisely why I could not understand your stance on CSS variables.
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.
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.
<?php include("styles/my.css"); ?>
<link rel="stylesheet" type="text/css" href="styles/my.css">
I totally agree what is being said. It’s all about the DOM!
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
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.
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.
Have a look at the most popular posts, possibly including:
Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.
Looking for a way to comment? Comments have been disabled, unfortunately.