CSS - HealthTeacher/style-guide GitHub Wiki

Much of this was inspired by idiomatic-css. Please add to this guide if you find any particular patterns or styles that we've adopted internally.

Table of Contents

  1. Naming
  2. Syntax
  3. Strings
  4. Organization
  5. Animation

Naming

  • Adhere to the SuitCSS naming conventions.
  • JavaScript hooks should follow the js-myJsHook pattern.
  • Testing hooks should follow the qa-myTestHook pattern.
  • Do NOT apply styles to js- or qa- prefixed classes.

Syntax

  • Use single quoted strings.

  • Never target an element by it's id, always use class names.

  • Only use single-line selectors for selectors with a single attribute.

    // bad
    .foo { color: #fff; font-size: 1.5rem; }
    
    // good
    .foo { color: #fff; }
    
  • Always prepend decimals values with a zero.

    // bad
    font-size: .25rem;
    
    // good
    font-size: 0.25rem;
    

Organization

  • Alphabetize all CSS attributes.

  • Within a selector, place includes before CSS attributes.

    // bad
    .Component {
      font-size: 1.5rem;
      @include transition(background 0.3s linear);
    }
    
    // good
    .Component {
      @include transition(background 0.3s linear);
      font-size: 1.5rem;
    }
    
  • Only use nested selectors for browser states (e.g. – hover, focus, etc), not for children or chains.

    // bad
    .Component {
      &.is-expanded {}
    
      .Component-child {}
    }
    
    // good
    .Component {
      &:hover {}
    }
    
    .Component.is-expanded {}
    
    .Component-child {}
    

Animation

  • Always test your animations on varied devices early and often. Testing during prototyping will help avoid shipping animations that hurt performance and drop frames.
  • Avoid using JavaScript for simple hover interactions. Rely solely on CSS when possible.
  • Use the Velocity.js for complex animations.