The True Advantage of CSS
Published on September 8, 2009 (⻠February 5, 2024), filed under Development (RSS feed for all categories).
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.
About Me
Iâm Jens (long: Jens Oliver Meiert), and Iâm a frontend engineering leader and tech author/publisher. Iâve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, Iâm a contributor to several web standards, and I write and review books for OâReilly and Frontend Dogma.
I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)
Comments (Closed)
-
On September 8, 2009, 11:55 CEST, Daniel said:
Very concise and agreeable.
Too many ‘cardâ metaphors though lol. -
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.
-
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! -
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">
-
On September 10, 2009, 16:05 CEST, Edgar Leijs said:
I totally agree what is being said. Itâs all about the DOM!
-
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
-
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.
-
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.
Read More
Maybe of interest to you, too:
- Next: âHTML 5â or âHTML5â?
- Previous: My Top 15 Android Apps
- More under Development
- More from 2009
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.infoâand The Web Development Glossary 3K. With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.