The Real Advantage of CSS
Jens O. Meiert, September 8, 2009.
This entry is filed under Web Development.
Despite CSS being around for a long, long time, there are still some myths around it. Recently reading Mike’s post on CSS evangelism again I couldn’t just very much 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 like to get misunderstood.
The main advantage of CSS is that it allows to separate concerns; it can thus make documents more maintainable with respect to their appearance. End of story.
You pretty much don’t have to pull out any other card. The accessibility card doesn’t count as there is almost 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 any points either. There are situations when going for presentational markup and making no use of external style sheets (which otherwise also mean at least one additional HTTP request) even offers faster load times.
Next, the SEO card must not hold any benefits either. The mere use of CSS can still mean anything for your HTML. The markup can be crap, it can be gold.
When referring to hosting, the cost card is not an ace, maybe not even a 7 or 8. Hosting costs depend on other factors than you using CSS. Hosting, let’s face it, is not really expensive anymore.
The job security card, to follow what has also been expressed from CSS friends out there, well, is a different animal. People who understand web development would focus on and hire only capable web developers who thus, yes, are able to conjure up marvellous CSS and equally fantabulous HTML (oh, yes, and maybe have a website). Given that and that people eventually learn from mistakes too, CSS expertise should mean some job security.
However, the maintainability card – which includes the “faster|cheaper|cooler redesign|relaunch” cards, so here I have to disagree with Mike – wins about every single match. No matter how crappy your HTML code is, CSS (and here I’m boiling CSS down to external, centralized style sheets for simplicity) 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 finding yourself in this situation is the main advantage of CSS.
Want more on maintainability? The maintainability guide will probably be in town for a few more weeks.
Enjoy the most popular posts, possibly including:
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.
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.