Skip to content
- Unless circumstances require otherwise, always use SASS preprocessor to generate CSS.
- Use the Modular CSS system to conceptually categorize CSS rules.
- When grouping selectors, keep individual selectors to a single line.
- Include one space before the opening brace of declaration blocks for legibility.
- Place closing braces of declaration blocks on a new line.
- Include one space after
: for each declaration.
- Each declaration should appear on its own line for more accurate error reporting.
- End all declarations with a semi-colon.
- Comma-separated property values should include a space after each comma (e.g.,
- Don’t include spaces after commas within
- Separate rules by new lines.
- Don’t prefix property values or color parameters with a leading zero (e.g.,
.5 instead of
-.5px instead of
- Lowercase all hex values, e.g.,
- Use shorthand hex values where available, e.g.,
#fff instead of
- Quote attribute values in selectors, e.g.,
- Use single quotation marks for attribute selectors and property values.
- Separate words in ID and class names by a hyphen.
- Class names should use full words rather than abbreviations.
- Use classes to assign appearance to markup. Never use id selectors in CSS.
- Use modular CSS naming conventions (http://thesassway.com/modular-css)
- Avoid specifying units for zero values, e.g.,
margin: 0; instead of
- Related property declarations should be grouped together following the order: Positioning, Box model, Typographic, Visual
- Don’t use
@import, instead use multiple
- Place media queries as close to their relevant rule sets whenever possible.
- In instances where a rule set includes only one declaration, consider removing line breaks for readability and faster editing. Any rule set with multiple declarations should be split to separate lines.
- Avoid unnecessary nesting in SASS. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested.
- Class names used as CSS hooks should reflect design semantics over content semantics. They should reflect the intent and purpose of the design element they represent.
- Avoid user agent detection as well as CSS “hacks”. Addressing styling differences over user agent detection or special CSS filters, workarounds, and hacks should be considered last resort.
- Avoid using the id selector in CSS.
- Develop a consistent commenting hierarchy.
- Use consistent white space to your advantage when separating sections of code for scanning larger documents.
- Organize sections of code by component.
- When using multiple SASS or CSS files, break them down by component instead of page.