Great CSS Techniques and the Simple Truth Behind Them

Published on Mar 11, 2008 (updated Feb 5, 2024), filed under development (feed). (Share this on Mastodon or Bluesky?)

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>

I won’t comment on the use of b elements and stuff (in my book, I already discuss HTML for this technique) but like to repeat: Great CSS techniques don’t necessitate far-reaching HTML modifications.

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 -->

It does!

❧ 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.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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. (I value you being critical, interpreting charitably, and giving feedback.)