An Exercise for Emerging CSS Experts: Avoid IDs and Classes

Published on October 21, 2008 (↻ 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.

To gain more expertise with CSS, there’s a great bonus level: Try to avoid IDs and classes altogether. That’s right: Write your markup without any IDs and classes.

Though I already mentioned this in a recent post about best practices for ID and class names, here’s the reason: Avoiding id and class attributes in their role as style sheet selectors requires a different mindset; it prepares for a new paradigm we face with CSS 3, where all the new selectors will contribute to a shift when it comes to HTML development when the need for styling “hooks” will not entirely vanish, but go down significantly.

To approach modern web development this way, grab a small project, some page, or even a document solely for testing purposes. In complex projects, avoiding IDs and classes can move much to the styling side, meaning a challenge to prevent harm on the markup side; in some cases doing completely without IDs and classes might not be possible. Also, the more complex the desired layout, the more markup might be required—yet when doing this kind of exercise, avoiding extra markup is key.

Why am I bringing this up? I felt reminded of former projects, and the lessons I learned in 2004 and 2005 have been of great value, when not just this site—see an archived version, albeit without styling—as well as UITest.com—see respective snapshot, too—have actually been done without using IDs and classes. When I realized that CSS was not supported well enough to go for more advanced styling, and that it’s fine to make use of id and class, I adjusted as is recommended—but kind of forgot that what I had learned was invaluable.

Even when you already tried, or when you don’t want to try right now, give it another thought: How many other elegant ways are there to get the HTML right and challenge (and grow) one’s CSS skills?

About Me

Jens Oliver Meiert, on November 9, 2024.

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 October 21, 2008, 23:06 CEST, pepelsbey said:
Hmm.

And what about reusable blocks conception? I mean special way of using blocks in many various combinations, even nested? unfortunally in Russian, but you can translate it via Google or try to understand pictures and code samples.

This is very helpfull and flexible method especially for really big services. We using it at Yandex.
On October 21, 2008, 23:12 CEST, Keonne said:
This is an interesting concept. I will take on the challenge and give it a try 😊
On October 21, 2008, 23:25 CEST, Kroc Camen said:
Fantastic, I’ve been hoping to find more examples of sites done without IDs and Classes!

It’s not that they shouldn’t be used, but people should learn to first do without, so that they better appreciate how to carefully select where they are appropriate.

My site has no DIVs too, try that out for a real challenge! It really makes you wrangle your mind for the semantics of all those HTML tags you have at your disposal!
On October 23, 2008, 1:37 CEST, Santhos said:
Quite interesting but a bridge to far for me I guess… It will definitely bring up some problems which I don’t have time for at the moment 😊

It might be more relevant to completely xml-driven websites because it’s more structure oriëntated. The way I code my sites right now I just couldn’t do without the id’s and classes!
On October 23, 2008, 4:13 CEST, Judd said:
Great post!

You can get a ton of mileage out of descendant selectors in many cases. Working with jQuery selectors has me so looking forward to CSS3.
On October 23, 2008, 11:53 CEST, Kroc Camen said:
@Judd: Looking forward to CSS3?
You can use it right now!

I wrote my site because there just wasn’t the right real-world example out there. Demos are good, but plenty of CSS3 is supported now, so used it should be, for real purposes.

So, I apologise, Jens, if it always seems like I’m hijacking your blog posts to spam my website; but everytime I hear people talk about HTML5 and CSS3 as if they’re a distant pipe-dream, I have to point them to the only concrete example I know, camendesign.com

So Judd, here’s CSS3 being fully used, in the now: http://camendesign.com/design/

P.S. Jens, you have much better writing skill than me, and your topics are superb-I truly would love to see this site written in HTML5/CSS3 with no classes/IDs/DIVs.
On October 23, 2008, 14:05 CEST, Jens Oliver Meiert said:
Вадим, well, I can make some sense out of that doc, however it mainly seems to target context-based styling? This is somewhat implied by the post, however it seems to deserve a few extra notes. (By the way, I’d love to follow up on your “Code Responsibly” comment.)

Keonne, Santhos, yes, give it a try and don’t forget to share your experience 😊

Judd, thanks!

Kroc, can’t say anything but “agreed,” “no worries,” and, referring to your post scriptum, that a) many of my sites are formally based on HTML 5 and all of them make some use of CSS 3, b) some things deserve some consideration of cost of problem, especially regarding this site, and c) you can rest assured that some things will happen, as it’s the process that’s so important (and as I don’t deny suffering from perfectionism) 😉
On October 24, 2008, 14:43 CEST, Niels Matthijs said:
Sounds like a fishy idea to me.

Classes and ids should reference components used on a site, adding extra semantics to the html.

Even with html5 or xhtml2 we’ll be lacking way too many elements. Of course, styling is possible but it will make our css files and selectors almost unreadable. Alos, adaptations to our html will influence our css, which should not happen.

It’s nice as an experiment, but in the real world where flexibility will save you money and css files are a complete mess even with the help of classes and ids I don’t see how this might help.

Like I said before, unless the html tag is a complete match for the semantics of the component, don’t add html selectors to your stylesheet.
On October 28, 2008, 14:47 CET, James Leslie Miller said:
This is an excellent way to train people to get into the proper mindset for what HTML should be used for—providing structure and meaning to your content.

The key phrase in this article is, “Avoiding id and class attributes in their role as style sheet selectors”.

Keep fighting the good fight, Jens!
On October 28, 2008, 14:56 CET, Jason Robb said:
Thanks Jens! Your reminder couldn’t have come at a better time for me. I got a case of class-itis earlier this week. You’ve successfully purged my desire to flagrantly use classes and IDs.

Rock on. Thanks again! =)
On October 28, 2008, 14:59 CET, Sarah Hall said:
bringing up the rear on this - I would love to see colleges and universities training like this - it would certainly be a really good base to start from and THEN build upon - I certainly wish I had been taught like this and am most definitely going to try this out, I am always looking for ways to improve, lighten the code, get a better understanding 😊 thank you
On October 29, 2008, 12:43 CET, Justin Sinclair said:
I’m seconding Niels comment. We should actually encourage the appropriate use of classes and ID’s to improve the semantics of a page. While some elements or groupings of elements contain enough semantics in and of themselves (very few people are going to be confused about a paragraph), a lot of the time we want to convey more information about an element or a group of elements.

You do this yourself - with good reason - on this site. As an example, you have two ul’s side by side labelled with the classes “nav” and “nav aux”. While in this simple example, I could probably guess fairly quickly what these ul’s were doing, the classes make it immediately obvious.

Apart from semantics, these classes also make the css more readable. Would you prefer to see:
```
.nav {blah}
.nav.aux{blah}
```
or
```
h1 + ul {blah}
ul + ul {blah}
```
I’d much prefer the first to the second. It also makes the CSS more robust. What happens when you change the markup slightly? In the first case, hopefully your css should survive, and if it fails it’ll be easy to diagnose. In the second “h1+ul” might no longer apply and how am I to remember that ul + ul once meant the secondary navigation ul?

I agree that classes and ID’s often get overused, and that well constructed CSS can reduce the need for extraneous markup. However, I think we should encourage the use of classes and ID’s, to increase the semantics of a page. The limited set of elements we have available to us now and in the future will never be enough.
On October 30, 2008, 10:59 CET, Jens Oliver Meiert said:
Niels, Justin, don’t think of this as a recommendation for everyday work but an exercise that offers good lessons.

Niels, as for the html element as a type selector—there’s nothing wrong with that, in fact it makes proper sense for document-wide declarations (e.g. document fonts or background).

James, Jason, thanks!

Sarah, yes, that would be interesting. After all many things are about methodology and processes, and approaching web development this way can make some other things a bit clearer.
On October 30, 2008, 17:47 CET, Alan Gresley said:
I agree with this approach to a certain extent but if a page has quite a few wrappers, then selectors like this

div>div+div ul

may target more elements than what is desired. My test page template has 7 IDs and classes on divs in total. Now look at the CSS and see how it can get very unspecified.
On October 30, 2008, 23:26 CET, Justin Sinclair said:
Jens: Cool 😊 It’s definitely an interesting exercise, and a really good way to get more preficient at using CSS selectors.

Alan: Interestingly I think this excercise is perfect for you. Having a look at your test page you could probably get rid of a bunch of the wrappers while still achieving the same visual effect. As a very quick example you could remove div#container from the markup and apply those rules to the body element.

Also, the class and id’s you’re using are very presentational and not descriptive. Why have div#wrapper2 when it could be called div#content? I’ve been guilty of excessive markup and presentational labelling in the past. What helped me most with this - it’s like AA, take one day at a time 😉 - was Andy Clarke’s book Transcending CSS. I highly recommend it, it’s one of my favourite web design books.
On October 31, 2008, 13:18 CET, Alan Gresley said:
Justin: You are correct. In other places, I have stated that this is a working template which should be finished around 2010. If you look at the template’s schematic layout you will see that one selector

div+div+div {..}

is targeting 4 elements. The divs with the IDs source1 and source2 are source ordered by using display:table (not the usual float layout with negative margin) for the good browsers (including IE8) and a old IE bug with clears on floats for IE7 and below. The ID and class names that you see are just there to help me with the CSS as I develop the template.
On November 5, 2008, 13:30 CET, Jens Nedal said:
I like this approach Jens. I think this paradigm can be applied to anything concerning CSS, HTML and Javascript.

Keep it simple. Keep it clean. Keep it small. Don’t add clutter where it is not necessary, ever!

Even if a structure gets more complex because of a complex design, try to keep it as simple as possible. This way one will also run into less problems that usually occur when markup gets to complex which will also make it complicated to deal with.
On November 5, 2008, 22:51 CET, Buzu said:
I didn’t read everything, but there’s is an important point I want to mention. There is no reason to avoid using Ids and Classes. These two attributes bring more sense to our documents at the same time they help us write more semantic markup. I’m completely aware of the different selector types you can use when writing CSS, but those are just more options and not a replacement for IDs and Classes. Classes serve to group elements that fall into the same category. For example, I could use a class to group all my external links. That makes a lot of sense at the same time that helps me create a visible difference between external and internal links. IDs help identify unique elements so that a website’s markup can be more readable. For example, by using IDs we can identify the different sections of a page; header, main content, menu, etc., could be identified by using ids. It’s my humble opinion that a better approach is to use a combination of both techniques, which I’ve been doing. I find it very useful for it reduces costs and increases productivity.