Great CSS Techniques and the Simple Truth Behind Them

Jens Meiert, March 11, 2008.

This entry is filed under Web Development.

There is a simple recipe to judge CSS techniques: Does the method in question require HTML additions and modifications beyond introducing certain IDs or classes?

If yes, the technique is likely to be not very elegant, in fact, it might be inadvisable, depending on the strictness you’re applying. Personally, I tend not only to assess these techniques as “inferior” but even to avoid and discourage to use them, and both theory as well as practice show that you’re in fact better off looking for alternative solutions since formatting induced HTML changes do not only mean less good code but also certain problems concerning maintainability.

However, it is nice to talk about about problems in a quick, concise manner, but two examples will probably strengthen the argument:

Questionable: Nifty Corners.

The initial proposal for rounded corners asked for the following (or similar) markup to be used together with corresponding 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>

I will not comment the use of b elements and stuff (in my book, I already discuss the HTML for this technique) but rather repeat what I noted before: Great CSS (here: HTML?) techniques do not require HTML modifications (that are so far-reaching).

Commendable: CSS Sprites.

CSS Sprites are a nice way to create delay-free hover effects (most of the time) that also improve performance by avoiding 1+ HTTP requests. Let’s see if the theory that lovely techniques live without HTML changes holds true:

<!-- Untouched HTML. -->

Yes, it does!

I cannot quite claim that this has been a scientific approach to CSS methodology assessment, but it should be a working indicator nonetheless. Among a few other factors, (sometimes even unnecessary) HTML modification is usually the point of criticism that arises when coming across fancy new techniques, probably even those “you can’t live without” or that are “for effective coding” (no offense, SM). Presentation should not require the structure to be changed, as this does mean mixture of the two.

Enjoy some popular posts, probably including contemporaries:

Comments

On March 11, 22:04 CET, Dave said:

Absolutely right!

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.
On March 12, 10:32 CET, Phil Nash said:

Seeing techiniques like nifty corners always makes me feel uncomfortable due to all the extra markup. If you have to do it, at least apply it with JavaScript.

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!
On March 12, 11:53 CET, Martin Sarsini said:

Certainly they are inferior techniques, but in some cases having a rich developed web site or web application with rich extras is something that makes it so sensational in usage and appearance, and for most of the final users all works great. In other cases you can realize that the same website is exactly the same thing without all that kb of javascript and wierd generated code… and it’s so sensational in it’s simplicity.

There is always a price you have to pay
On March 12, 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 12, 16:40 CET, Jens Meiert said:

Dave, right, some authors could immediately state whether or not they ask for additional HTML. And as Phil pointed out, CSS 3 will give you at least two ways for rounded corners, either by using more than one background image or via border-radius.

Phil, thank you, though I am a little bit sceptical about the JavaScript alternative … personally, I like to check the final document tree as well

Martin, you’re of course right, even though some might not be aware of the price they’re really paying, above all concerning professionalism …

Gemma, unless step 3 dictates everything, this is a very good approach!
On March 18, 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, 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*
On March 19, 11:41 CET, Mike said:

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).
On March 22, 9:13 CET, Jordan Clark said:

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 div or span here or there, either. It’s all about balance, IMHO.

Jens Meiert

Great CSS Techniques and the Simple Truth Behind Them

Read More

Comments

Leave a Comment