Base CSS Coding Standards and Guidelines

  • 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., box-shadow).
  • Don’t include spaces after commas within rgb(), rgba(), hsl(), hsla(), or rect() values.
  • Separate rules by new lines.
  • Don’t prefix property values or color parameters with a leading zero (e.g., .5 instead of 0.5 and -.5px instead of -0.5px).
  • Lowercase all hex values, e.g., #fff.
  • Use shorthand hex values where available, e.g., #fff instead of #ffffff.
  • Quote attribute values in selectors, e.g., input[type="text"].
  • 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 margin: 0px;.
  • Related property declarations should be grouped together following the order: Positioning, Box model, Typographic, Visual
  • Don’t use @import, instead use multiple <link> elements.
  • 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.