Approach

Naming Convention

Naming is one of the most fundamental and important part of developer activities. Naming conventions help us a lot making our code more readable, predictable. And when it comes to code modification and debugging, conventons help us to easily find needed part of code. They also give us understanding where to put stuff, so it is extremly important to stick to conventions espesially while working in a team.

Consider using CSS Class Name Generator , it might be helpful if you're looking for a cool class name for you components.

Naming selectors

Avoid presentation or location specific words in the name, like blue, text-gray, or side-block. What happens when you decide to change the color? The class blue is actually red?

Do not use class names that describe content of an element. One day you can come up with a class name like .products-list and another day you notice that product list styling is well suited for listing tweets. So what would you do? Re-implement .products-list to with same styles but call it .tweets-list or just let tweets live inside .products-list? It is better to give it abstract name like .entries from the beginning.

Names should be lowercase, using a dash - as a separator in a multi-word class names. It's clear, readable and distinguish CSS from underscore case and camel case naming.

Use full descriptive words. Abbreviating a word may save you a few milliseconds to type initially, but may make your code harder to read, costing you more time down the road. Being consistent in this will save you the time spent thinking how exactly you abbreviated a word couple of months ago.

Use nouns for naming objects and modules.

When it comes to naming modifiers and states, use adjectives as they are describing type or state of an object.

Natural language

Literally every element in nowadays web interfaces already have it's own name (or even several names). We as web developers are using them in every day life talking to other developers and designers. So why should we make up some fancy class names with prefixes or suffixes, abbreviate words or concatenate several words to make selector more unique?

Just use natural language for naming classes. These words are mostly unique already, and they make your code a lot more readable and understandable. Using this names as CSS selector gives us most descriptive and understandable language to build web pages and communicate with other developers.

Reference to Frequently used classes

Since we are using same terminology in web development, it would be not hard to come up with general conventions on naming web components. May be even start using standard class names for standard elements. This table below (is being constantly changing and extending) may be used as a convention on how to call elements or at least as reference when looking for a nice class name.

Selector Component Comment
Layout classes
.wrapper Wrapper element Most often used for sticky footer
.container Wrapper that sets width and centers content aka { width: 960px; margin: 0 auto }
header.header Page header
section.body Page body
footer.footer Page footer
aside.sidebar Page Sidebar
section.content Page main content Used along with sidebar
Components
.navigation Navigation element
.pagination Pagination
.tabs > .tab Tabs navigation Parent element uses plural 'tabs' and each tab is named singular
.breadcrumbs Breadcrumbs
.dropdown Context menu Used to organize list of links that is hidden by default
.article Entry item Used for different kinds of entries
.thumbnail Image thumbnails
.media Media object Abstract object styles for building various types of entries (like blogposts, comments, etc) that feature a left- or right-aligned image alongside textual content.
.panel Panel block Used if you need to put some content in a box
.tooltip Tooltips
.popup Popups
.flash Flash messages
.label Labels
.button Buttons