If you are working with web developing like me you must be quite used to working with standards. But what about the markup of the documents, the use of class and id names, there is no standard, yet.
So what I am after is a way of marking up content the same way, I would love to see when all professional sites uses the same id and class names, all navigation is called navigation, footer is footer and not bottom area. I could make an CSS files that works on not only my own site but also on other sites.
## Same thing, different name
I did a investigation on a bunch of sites to see what kind of class and id names that was used. This was what I found out.
### Main layout elements
* theme, logo, logoArea, header, tagline, top
* content, body, pagebody, maincontent, contentArea, textArea, startTextLeftArea, leftArea, contentBody
* navigation, nav, menu, topNavigationArea, globalNav
* subnavigation, subnav, sub menu
* related, sidebar, side, startTextRightArea, rightArea
* footer, content-footer
### Wrappers
* wrapper, container, bg, contentWrap
### Navigation elements
* quicklinks, shortcuts, shortcut-section
* home
* naviItem
* miniNav
### Search
* searchbox, searchmodule
### Ads
* ads, adwrap, bigAd, adContent, promo
### Content types
* feeds
* abouttheauthor, contact, contactInfo
* legal, copyright-terms
* firstNews, news, oldNewsList, smallNews, bb
* date, DATE
* linklist, link-list
* archive
* current, selected
### Forms
* input
### Accessability elements
* skip, skipnav
## Suggestion
I’ve made some suggestions. First of all, use names that describes what kind of content it is, not how it looks or where it is placed. Next, use no capitals, use “-” for spaces. And last, keep it short.
### Main areas
* wrapper
* logo
* nav
* sub-nav
* content
* related
* footer
### Navigation elements
* nav-item
* home
* shortcuts
* current
### Search
* search (easy one)
### Ads and commercial
* ads
### Content types
* feeds
* about
* legal
* archive
* date
### Accessibility elements
* skip
What is your thoughts, any suggestions?
(Daniel & Ulf, thanks for the article suggestion)
Couldn’t agree more. Excellent suggestions!
Personally, I’ve recently started using a hyphen instead of the good ol’ camel back syntax(i.e. left-nav instead of leftNav) and it feels so much better.
Edited: Fixed the links.
You might find some additional thoughts and ideas for just this at What is a name, part I with a followup at What is in a name, part II.
A “standard” might be a good idea, but it’s going to be damn hard getting everyone to agree and change existing practices. It’s also going to be tough coming up with something that works for every site.
Uh, what a clusterf*** of a post, heh. Sorry about that. Perhaps a few formatting tips are in order near this comment field. The absence of them makes me think I am meant to just type clear text – which apparently was a wrong assumption
Robert: yeah me too. I do not know, but I think it is easier to read.
Jacob: I´ll try to add that and thanks for the links.