Best practices for Cascading Style Sheets (CSS).
Table of contents
Place each selector on its own line
Order selectors alphabetically
Surround braces with whitespace
- Include 1 space before opening brace
- Place closing brace
}on a new line.
- Place a new line after closing brace.
Group related selectors
Increase organisation and readability by grouping related selectors into main and sub sections.
- Indicate main sections using a triple line comment.
- Indicate sub-sections using a single line comment.
Prefer class selectors to generic element tags
Class selectors have better rendering performance and are more readable than generic element tags.
Namespace class names
Prevent collisions with 3rd-party classes by namespacing all class names.
Lowercase class names
Prefer purposeful class names to presentational
Prefix class names based on the closest parent or base class
Place each declaration on its own line
Group related properties
Group related properties together in the following order:
- Box model
Order properties alphabetically
Order properties alphabetically within each group.
Lowercase all values
Skip leading zero in decimal values
Skip unit in values where length is 0
Use hex for color values
rgba() if transparency is needed.