This morning, for one reason or another, I decided to have a go at coding up a page without using any IDs or classes in my markup, and therefore none in my CSS. I’m not sure why I tried it, I guess I just did… In order to make it a fairly painless job I dove straight into the browser and coded up a simple header, footer, two column layout. View the demo and be sure to view the source.
Using a combination of more advanced selectors such as sibling and nth-of-type you can target elements based on their position in the markup rather than a given name. The practical upshot of this is that your markup is much leaner and cleaner, removing class and ID names has a notable impact.
Using advanced selectors
For a complete list please see http://www.w3.org/TR/css3-selectors/
The more advanced selectors take information about an element to determine whether it matches a certain criteria, for example body>div will target a div that is a direct and immediate descendant of the body; p+p will target a paragraph immediately preceded by a paragraph.
On this basis, you could select (for example) your main content div by knowing that it’s the second div in your content wrapper: body>div div:nth-of-type(2). Broken down we have:
body—sets the root>div—the firstdivinside the body (the wrapperdiv)div:nth-of-type(2)—the seconddivin the wrapper (just after the headerdiv).
Why I think this won’t catch on
For the time being, let’s completely disregard that Internet Explorer completely disregards these selectors…
As you can see from the above example, targeting the single, lone, unique content div has taken two advanced selectors and 27 bytes. The selectors are fixed, the content div will always have to be the second div in the div that is an immediate child of the body. This is incredibly restrictive. Surely #content{…} is far better than body>div div:nth-of-type(2){…}…?
For the sake of ease, instead of rambling about pros and cons, I’ve simply drawn up a list of advantages and disadvantages:
Advantages:
- Leaner markup.
- Promotes more sensible structuring of code.
- Promotes semantics.
Disadvantages:
- Difficult syntaxes to remember.
- Extremely restrictive—elements are styled based on their location meaning that any moving/restructuring means all styles tied to an element are lost. This leads me on to…
- The CSS is no longer just describing style, it also describes structure. CSS is a styling language, not a markup one.
- Arbitrary elements such as images and
divs that change depending on page content (blog posts for example) aren’t fixed enough to be styled based on their structure. This means that any variable content will require IDs and classes anyway, so you might as well us them across the board as opposed to a mix of with and without. - Difficult to understand. I wrote the CSS for the demo page and I’m having a hard enough time doing the calculations to work out what does what. Imagine inheriting that!
- Jenga. As soon as you alter your markup, the structure dependent CSS will come falling down too, what might be the first child might become the second, making the second child the third and so on, creating a domino effect.
Final word
While the more advanced CSS(3) selectors are impressive, and incredibly powerful, they aren’t flexible enough to allow any large dependency upon them. That, and they’re more awkward to understand than the tried and tested ID/class ‘hooks’ we know and use. There are far too many downsides to make cleaner markup a big enough plus-side in my opinion… Oh, and Internet Explorer doesn’t seem to honour any of them, but that can’t have come as much of a surprise.
+
Wednesday, April 7th, 2010 in Web Development.
Teddy said on 7 April, 2010 at 12:33 pm
And yet another disadvantage which all browser vendors keep mentioning but none of the “respected” blogs mention. Speed! All these advanced selectors and nested elements takes longer to process. IDs are unique for a pretty darn good reason.
I’m glad your article isn’t yet another of the “hey, let’s use the latest css-selector support, just cause we can”, it was a good read.
Christina said on 7 April, 2010 at 12:43 pm
This is quite an interesting experiment. You are right in all your pros and cons but I think this method could be useful in the case of a project where you cannot alter the markup.
I find that often inherited markup from templates which cannot be edited do not have enough class names and it is difficult to acheive many things.
Just a shame we’ll have to wait a while for IE to catch up!
Sam Hardacre said on 7 April, 2010 at 12:52 pm
An interesting experiment Harry.
I agree with all your points regarding the applicability in a real-world situation, however, it could be an interesting tutorial for beginners and more experienced folks to gain a better insight into advanced selectors and what can be achieved with lean markup without resorting to ids and classes from the outset.
I could certainly do with a refresh :)
Anthony Mann said on 7 April, 2010 at 2:11 pm
Great study into CSS3 selectors.
My only negative point to add would be that human readability of the code suffers from the lack of descriptors in the HTML tags. The comments help guide your understanding, however deeply nested and complex structures may suffer. This also applies to the CSS. For quick code updates, this is not really ideal. I would say that ID’s and Classes certainly win in terms of code comprehension.
In a production environment these selector approaches can be great when cascaded from an ID or class. Libraries such as http://dean.edwards.name/IE7/ can help ensure this works correctly under IE.
Once again, good to see you pushing the boundaries. Great proof of concept!
Ted Goas said on 7 April, 2010 at 2:20 pm
Interesting article though I’d agree with you for many of the same reasons you mentioned. Also the markup might be leaner, but a somewhat larger CSS file would likely cut into that savings.
Pavel Turbalan said on 7 April, 2010 at 2:42 pm
A whole site cannot be built without id’s and classes. I wouldn’t even want to do that.
But one thing that I strive to do is to style lists, paragraphs, forms without id’s or classes, based only on their container.
And I love the idea you had to do this. Pretty cool.
Scott Couper said on 7 April, 2010 at 2:57 pm
Nice in theory, if a little tricky to implement in the real world.
Sort of reminds me of a conversation held in the pub a few years ago that went along the lines of “You think its possible to build a modern semantic website without any divs, and not go crazy?”
The theory behind the madness was use only H1- H6, spans, p’s, etc, etc with classes and id’s to mark up the structure.
Never did test out that theory, so hats off for trying out this one.
Becca said on 7 April, 2010 at 3:54 pm
Interesting CSS étude! Thanks for pushing the boundaries and sharing the results.
Brad Czerniak said on 7 April, 2010 at 7:05 pm
Interesting experiment.
I wonder why you elected to use CSS3 but not HTML5. If you had a few more (semantically-meaningful) tag elements at your avail, many of the selector issues you faced would go away. For instance, you could just target header{},nav{},article{},aside{},and footer{}, then hit the rest of the page elements like usual.
Here’s a not-particularly-good example of what I mean.
Dean said on 7 April, 2010 at 10:06 pm
I actually built an entire blog like this once. I di it with html5 elements though, which made it a tad easier. But you are bsoluyely right. It was far too restrictive and I ended up scrapping the design and rebuilding using IDs and classes. In the end the total file
size (HTML and css) was actually smaller.
Prosper said on 8 April, 2010 at 1:03 am
How about IE?
Sean said on 8 April, 2010 at 1:27 pm
Agree with Brad above. I would bet that using some of the new tags available in HTML5 would make this exercise infinitely easier.
Sean said on 8 April, 2010 at 1:58 pm
http://www.designingdotgov.com/examples/sites-without-ids-classes/
Added one section to the CSS to establish the new tags as block-level elements, then changed the various divs in the HTML and CSS to their appropriate HTML5 counterparts.
Note that it degrades the same way in IE7 as well. This appears to happen because both HTML5 and CSS3 are not supported properly. However, a little javascript would resolve this problem.
Still, very thought provoking idea. Makes me both exited for the future, but concerned, since IE7’s support for this stuff is non-existent.
PS – Don’t mind the blog my example is sitting under. Was – and perhaps still is – an idea that I just haven’t had time to run with yet.
Catherine Azzarello said on 8 April, 2010 at 3:09 pm
I’m with the HTML5 crowd. While I don’t think that you can practically do away with all IDs and classes, using the more semantic elements of HTML5 is a good start towards leaner and meaner code.
Within that environment, shorter strings of advanced selectors become simple and hold up well within CMS.
Take a look at the H5 theme by Chris Coyier and Jeff Starr. I love working with this theme because of it’s purity.
Great exercise, BTW! Thanks.
Agustín Amenabar said on 8 April, 2010 at 3:19 pm
I absolutely agree with you about HTML 5.
What percentage of the smartphones support it? if most of them HTML5 should be used for mobile alone. also the specs aren’t standard yet and could take some time, or never be like HTML2 and 3.
Hold your horses people.
Natalya Schwander said on 8 April, 2010 at 6:08 pm
Hi – I want to say thank you for an interesting post about a subject I have had an interest in for a long time now. I have been looking in and reading the comments avidly so just wanted to express my thanks for providing me with some very good reading material. I look forward to more, and taking a more active part in the discussions here, whilst learning too!!
Nicole Dominguez said on 8 April, 2010 at 8:47 pm
This looks really interesting. I don’t think it would be practical to use right now, because of the cons you stated, but maybe one day sites could be built around the theory of using css with position in code. Nice!
Shaun said on 8 April, 2010 at 10:08 pm
I don’t think anybody suggests you should code without using ids and classes **unless you are using html5**
Of course it is more difficult so long as you keep using divs. The new HTML5 elements make it a lot easier.
For an example of a beautiful site that has no ids and no classes have a look at http://www.camendesign.com and be sure to check the source code!
Sachin Khosla said on 9 April, 2010 at 6:44 am
Ah, When will Internet Explorer learn .. crap it is !
Enrique Ramírez said on 9 April, 2010 at 7:09 am
Nice! This reminds me of those “Style my MySpace profile” jobs I ued to have a while ago. But without the nice selectors.
HTML5 would’ve been a better way to showcase this. :) Easier as well.
Stepan Reznikov said on 9 April, 2010 at 8:53 am
Teddy made a good point in his comment about the speed of these advanced selectors. I also want to cite David Hyatt (architect for Safari and WebKit, also worked on Mozilla, Camino, and Firefox):
Usable Efficiency said on 9 April, 2010 at 11:51 am
Thanks for posting this. It will be some time till anything like this is possible anyway but interesting to read the benefits and drawbacks. Another approach would be to add the classes and IDs with javascript but would be a little tricky, time consuming and defeats the purpose really, but anyone viewing raw source would see lovely clean code :-)
Kroc Camen said on 9 April, 2010 at 2:52 pm
Don’t mean to be an ass, but I’ve been doing this for two years; and not just a demo, as my actual working site with a ton of content. HTML5 is really necessary in such an instance, but that’s really not the problem it used to be anymore.
And CSS3 selectors are negligible compared to other speed bumps like HTTP requests. The quote that without them the page “perform[s] significantly better” is rubbish. My website renders instantaneously from one page to the next. CSS3 removes the need for a ton of extra markup and even images, making for a speed improvement greater than the microseconds longer a selector may take.
M. David Green said on 9 April, 2010 at 5:11 pm
A simple Javascript shiv for HTML5 element support in IE makes an experiment like this even more practical. If you’re working with CSS3, the current popular understanding of HTML5 as it’s implemented should probably be assumed. It’s a shame so many of the examples of working sites in the comments built along these lines crash and burn in IE6. But it’s useful to see how far you can stretch the advanced selectors when you have to.
Jeremy Carlson said on 9 April, 2010 at 7:12 pm
Wow, even though i knew this was possible, I would never have bothered to try it do to the sheer absurdity of the css. What a pain in the rear, and I would have been frustrated because I wouldn’t remember what nth child I would have been trying to target. Cool to see though!
@Kroc….very cool site. I liked the article “How to Centre and Layout Pages Without a Wrapper”. Didn’t really think of that, and very clean and cool way to do it.
Winnipeg Web Design said on 10 April, 2010 at 1:43 am
There is a simple way of some of the layout and desing working with HTML5/CSS3 working in IE. http://jaredheinrichs.com/how-you-can-use-html5-now-even-with-older-browsers.html
Hope that helps some people :)
Creative Nuts said on 10 April, 2010 at 7:26 am
great idea :)
Usable Efficiency said on 10 April, 2010 at 8:59 am
Kroc Camen :: I dont mean to be an ‘ass’ either but have you looked at your site in IE? Any version of IE. Its like it has no stylesheet. 60% + use IE on an everyday use. HTML5 isnt supported yet, its not time to produce something like this yet, this is the authors point.
Kroc Camen said on 11 April, 2010 at 7:48 pm
@Usable Efficiency. IE is 5% of my stats. Not worth my time. Know your market, know your audience.
NIels Matthijs said on 12 April, 2010 at 7:17 am
Very good article.
Especially the point about adapting the code is a good one. I’m not a big fan of this “ultraclean” markup either.
One thing though. These selectors do have a clear function. CSS can describe structure if the design requires it. Like first/last elements with different stylings, or a grid marked up with a floated list. I’m missing that a little in your article.
Apart from that, good stuff!
Adal Design said on 13 April, 2010 at 5:54 am
Nice reflexion, and cudos for taking that project all the way, even just for kicks!
Advanced selectors are EXTREMELY convenient in my experience for certain usages, the most obvious being the styling of dynamically generated content in situations such as WordPress.
Much of the dynamic content of a CMS based website is a repetition of the same structures. Placing a class or ID on a father element containing multiple repetitions of the same structure creates an ideal situation to then make use of advanced selectors.
Clearly it’s not all one or the other, but rather a savvy balance that makes perfection.
Jaina said on 20 April, 2010 at 9:22 am
Really interesting to see how this was done – thanks for showing us the pros and cons. It’s refreshing seeing an article like this showing the negatives of using CSS3 selectors, rather than saying, “hey this is cool, everyone do this!”.
However I always feel a little teased when i see these things, i love where HTML and CSS is progressing, i just wish i could actually start using it commercially.
Nikki said on 10 July, 2010 at 9:43 pm
Interesting experiment. Wish I could use CSS3 selectors in practice tho!