Great CSS Techniques and the Simple Truth Behind Them
This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.
There’s a simple recipe to judge CSS techniques: Does the method in question require HTML additions and modifications (beyond introducing IDs or classes)?
If yes, and depending on the strictness you’re applying, the technique likely isn’t elegant and might be inadvisable. Personally, I avoid and discourage to use HTML-heavy techniques. Both theory and practice show that you’re better off looking for alternative solutions—presentational HTML changes do not only mean worse code but also particular problems for maintainability.
While it’s nice to conceptualize such problems, here are two examples:
Questionable: Nifty Corners
The initial proposal for rounded corners asked for the following markup to be used, in conjunction with extra CSS styling:
<div id="container"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <!-- Content --> <b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div>
Recommendable: CSS Sprites
CSS Sprites are a nice way to create delay-free hover effects, one that improves performance by avoiding HTTP requests. Let’s see if the theory that good CSS techniques do without HTML changes holds true:
<!-- Untouched HTML -->
❧ This has not been a scientific approach to CSS methodology assessment, but should serve as an indicator. HTML modifications are for good reason the point of criticism when it comes to new techniques, including those “you can’t live without” or that are “for effective coding”. Presentation should not require the structure to be changed, as that couples them tightly.
I’m Jens, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. 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 a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
Taking such a pure stance on code sometimes forces me to decide that something isn’t possible (yet). For example, is there a way to do rounded corners or some other image-based border style on a div of flexible dimensions?
Before I read any article on a tricky CSS idea, I check to see if the author outlines what support is like in major browsers. I wish authors would similarly state outright if extra HTML is required.
This may be a simple analysis, but I agree and think you are totally right. If you are adding markup then you haven’t fully separated structure and style.
Dave: we are all waiting for CSS3’s border-radius to be well implemented across the board!
There is always a price you have to pay
On March 12, 2008, 12:10 CET, Gemma said:
I’d love to be able to be semantic all the time, cut off the extra added divs and such whose only purpose is to align stuff (backgrounds that are stupidly complex most of the time).
My rule of thumb tends to be:
1) Mark up content semantically and cleanly.
2) Style it as per the design, as far as possible.
3) Add extras to make it fit the design exactly.
This tends to keep it as clean as humanly possible while still giving in to the fact that clients always want the design thats the hardest to build in a semantic manner. 😊
On March 18, 2008, 21:48 CET, lynne said:
Jen, I briefly looked over the CSS3 and Nifty corners that you posted in regards to rounded corners with CSS. Also the w3c(always there for me).
I have had a lot of fun tinkering with rounded corners and noticed that if I base a similar technique with background images it was taking up about 18 images! Not to mention extra non-semantic wrapper and enough css I could fall over. I think that Nifty Corners hit it right when they said that you used about 18-20Kb or so.
Great CSS technique, concise and to the point.
On March 18, 2008, 21:51 CET, lynne said:
I’m so sorry I forgot the (s) in your name…I apologize about my typing error. Again apologies. Jens*
I also apply an additional rule - will the particular hack be needed in a few years time?
Again, rounded corners: already an established part of the spec, supported by Mozilla and by WebKit: those browsers get to show off, IE gets to look a bit square (which it is).
I tend to take a pragmatic approach to these matters: for me, its a case of deciding whether the means adds enough value to justify the ends (generally, I find it does not).
I agree with you in principle, though: that so-called “nifty corners” technique is very ugly, and not something I would use personally. However, I am not so pedantic that I object to an extra
spanhere or there, either. It’s all about balance, IMHO.
On June 1, 2008, 1:08 CEST, Ludde said:
Maybe this is interesting to you, too:
- Next: Website Optimization Measures, Part III
- Previous: The Secret of Maintainability
- More under Web Development, or from 2008
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try 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.