CSS id and class naming
Simon Rentzke
May 30, 2010
I'm a developer, I like structure, I like clean code, I like DRY code. I find writing CSS incredibly painful.
CSS1 was first published in December 1996, so I ask, why in 2010 does it feel like CSS is just as painful as it was 14 years ago?
A few great CSS tools exist to make the process of defining layout and structures much easier. A few different examples include; Baseline, Sass, Less, 960, Yahoo! grids and Blueprint. Unfortunately nothing quite cuts the mustard. We've tried a few of these at Unboxed, but they still fail to some degree on the bigger projects.
Where are the standards? You can't lay all the blame on IE6 can you? Recently Jason Cale dedicated a fairly lengthy blog post to why you should hit return whilst writing your CSS.
A very simple problem I often find is what I should name different elements, and if I should use ids or classes. After often hearing the two @ubxd CSS heroes Attila and Will have lengthy debates on the best way of doing things, I think the real answer is that there isn't one.
So I decided to look around the web, see what other people are doing, see what the top websites of the world were doing. I downloaded the top 1 million websites from Alexa, and wrote a quick app that scrapes these sites, and tracks the top names used for ids and classes.
So here are the results (I stopped at 20000 results):
| Top class results | ||
| # | Class | |
|---|---|---|
| 3090 | clear | |
| 1946 | logo | |
| 1879 | title | |
| 1818 | content | |
| 1743 | last | |
| 1613 | footer | |
| 1582 | right | |
| 1582 | text | |
| 1562 | left | |
| 1471 | first | |
| 1467 | button | |
| 1331 | header | |
| 1187 | more | |
| 1179 | search | |
| 1131 | copyright | |
| 1124 | menu | |
| 1098 | clearfix | |
| 1000 | active | |
| Top id results | ||
| # | ID | |
|---|---|---|
| 5789 | footer | |
| 4622 | header | |
| 3170 | content | |
| 2555 | logo | |
| 2019 | container | |
| 1640 | main | |
| 1640 | search | |
| 1367 | wrapper | |
| 1268 | nav | |
| 1146 | menu | |
| 867 | login | |
| 865 | top | |
| 858 | sidebar | |
| 851 | cse-search-box | |
| 842 | page | |
| 817 | copyright | |
| 700 | __VIEWSTATE | |
| 628 | navigation | |
So, not that interesting I'm afraid. But what is interesting?
- Some of top ids are elements in HTML5 for example "footer", "header" and "nav" so we're making some progression in standards.
- The use of id and class seems to be used interchangeably, there really is no common standard.
- We see heaps of sites using "footer" and "header" as a class name. Is that ok?
So even though the results are not too interesting, I think they serve as a little reference guide, so that in the future I can name things similarly to other people, so that other developers will be able to easily read my code.
For more results check it out here, thanks to the heroes at heroku for their servers that did all the grunt work.