CSS Framework Priorities

list.md

• Use classes for everything as much as possible (no ID selectors, no tag selectors)
• Use a special prefix for classes to attach page-specific interaction JavaScript, e.g. .js-affiliates-table
• Use * { box-sizing: border-box; } as the rule, not the exception
• Widgets are always preferable over page-specific styles
  • Widgets can be broken down into 1.) framework widgets (buttons/wells/tables) - these are re-usable across projects and 2.) app-specific widgets (dependencies not filled widget, notification widget, etc.) - these are project specific
• Pay attention to typography using simple guidelines
  • Pick a base line height
  • Size all line heights as multiples of the base line height when possible
  • Attempt to establish vertical rhythm of all block element heights
  • Use the line-height as the correct multiple for vertical margin above and below elements
• Establish a style guide that prioritizes grouping by rule type above all else
  • Position rules (position, left, top, z-index)
  • Block rules (height, width, margin)
  • Inline/cascading rules (line-height, color, text-transform) - line-height is always the first rule
  • Decorative rules that do not affect layout (padding, border, background, box-shadow)
• Stop worrying about putting @include at the top of a rule section, group SCSS includes by rule type like any normal property
• Example style guide
• Encourage people to put all of their color and z-index values into a single place
• Try not to size anything with a fixed width - write fluid widgets