CSS guidelines

README.md

BEM

• Block - independent / standalone entity
• Element - a subcomponent of a block
• Modifier - a state or variation of an entity

Rather than use strict naming for blocks, elements and modifiers stick to class name for the block, tags for the elements.

Also prefer to use RDFa Lite semantic selectors rather than classes, i.e.:

.company-list [typeof=Organisation] > [property=name] {
  
}

Use Bower and Git to your advantage: isolate the blocks within your stylesheet and implement them as separate versionable code bases with explicit dependencies.

styles-base/
  .git/
  examples/
    index.html
  .gitignore
  bower.json
  index.css

styles-header/
  .git/
  examples/
    index.html
  .gitignore
  bower.json
  index.css
  README.md

This makes it much easier to manage and reuse styles within complex stylesheets.

Others:

• Unceremonious - no codenames, double hyphens, double underscores
• Mixins - reuse and share styles using mixins
• Demonstrate - document styles with examples, maximise reuse by making it easy for devs to use it, at least one example per block, in isolation.
• Structural / layout / theming - Kinda SMACSSy, i.e. color, font tend to change with theme, layout might not, css fixes don't change, keep the different types separate, try and
• Defer to base - defer styling to base, keep decisions within blocks as loose as possible, this will allow greater across the board control.
• Configurable - use lots of variables in SASS, the more variables you have the more control $primaryColor: xxx; button { background: $primaryColor }, $primaryColor: xxx; $buttonBackgroundColor: $primaryColor; $productAddToBasketButtonBackgroundColor: $buttonBackgroundColor; button { background: $productAddToBasketButtonBackgroundColor }.
• Independent - minimise nesting / nested selectors / rules, fixing styling for a particular page / layout, prefer creating a new fix class to apply the styling rather than modifying an existing styling or using nested selector. i.e. .productpage-sidecol-header-pad { padding-right: 2em } rather than .productpage .sidecol .header { padding-right: 2em }. Also ensure dependencies / imports for each block are mapped correctly, so that each block can be used / included independently of other blocks.
• Sizing:
  • EM / REM all fonts and heights
  • Percent all widths
  • VW base font size only
  • Pixel details (border-widths, shadows, box-radius)
• File per block: makes it easier to navigate and find items
• Root: Use expressions, five-whys, button { height: 2em } button { height: $fontLineHeight + $buttonFontPad * 2 }
• Block stylesheet should render bug free on its own (i.e. all layouts not broken, alignment correct), import dependencies as required. Test using example fragment and block stylesheet only (Demonstrate).
• Guarded assignment: make default configurable variables $bodyFontSize: 14px !default; so that they can be overridden at the import level $bodyFontSize: 16px; @import "module", see (and prefer) defer to base.