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.
Avoid presentation or location specific words in the name, like
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
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.
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.
||Wrapper element||Most often used for sticky footer|
||Wrapper that sets width and centers content||aka
||Page main content||Used along with sidebar|
||Tabs navigation||Parent element uses plural 'tabs' and each tab is named singular|
||Context menu||Used to organize list of links that is hidden by default|
||Entry item||Used for different kinds of entries|
||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 block||Used if you need to put some content in a box|