Use of BEM methodology to collaborate on large CSS code base in a maintainable manner.
- Each selector should be on its own line, ending in either a comma or an opening curly brace.
- Each declaration should be indented one level relative to its selector with an ending semicolon.
Example:
.selector-alpha,
.selector-beta {
counter-reset: section;
text-transform: small-caps;
}- Use lowercase and separate words with hyphens and underscore when naming selectors.
- Use snake case (Not camelCase)
Correct:
.class-name {
color: #ffffff;
}Incorrect:
.className {
color: #ffffff;
}- Property name should be immediately followed by a colon, then a single space, and then the property’s value.
- Use lowercase, including hex color:
#aaa - For property values that require quotes, use double quotes instead of single quotes
- Avoid specifying units for zero-values.
- The declarations in a ruleset should be ordered so that the purpose of the declaration block is most obvious.
- Display
- Positioning:
position, float, clear, top, right, bottom, left, direction, and z-index - Box model:
[(max|min)-]height, [(max|min)-]width, margin, padding, border, box-sizing - Colors and Typography
- Other
- Should be avoid adding them manually and generate them through autoprefixer through pre-processor tool, gulp or grunt.