My coding conventions

readme.md

CSS Coding Styleguide

• Use 2 spaces for indentation
• Avoid descendent selectors (.my-module p {…})
• With Sass avoid nesting too deeply
• Avoid attaching classes to elements (div.category {…})
• Avoid !important !!!
• Use percentages and box-sizing when possible
• Rely on the component library
• Try not to write any CSS if you can
• Test :)

.selector {
  // Current selector's styles
  // are set before nesting
  property: value;
  property2: value;

  p { // direct descendent
    property:value; // Not good
    property: value; // Good
  }
  .className {} // Not good
  .CLASSNAME {} // Not good
  .class_name {} // Not good
  .class-name{} // Not good
  .class-name {} // Good

  // Successive selectors (one per line)
  .selector-1, .selector-2, .selector-3 {} // Not good
  .selector-1,
  .selector-2,
  .selector-3 {} // Good

  // One liners
  .one-liner { margin: 0; border-radius: 5px; font-size: 15px; } // Not good
  .one-liner { margin: 0; } // OK: one property

  // Modifiers after base styles
  &.modifier {
    p { // overridden descendant

    }
  }

  .indentation-tricks {
    // Aligned values are more readable
    $var-alpha:   15px !default;
    $var-epsylon: true;
    $var-zeta:    false;
  }

  @media (min-width: 680px) {
    // Alterations for this breakpoint
    // With Sass you can nest @media queries
  }

  // Conditions
  @if $compact {
    // Case 1
  } @else {
    // Case 2
  }
}

// Blank line at end of file

HTML Coding Styleguide

• Use 4 spaces for indentation
• HTML5 with xHTML syntax (eg: <br />, <img alt="" /> are self closing tags)
• Try not to nest too deeply, but keep it modular and easy to reuse
• Avoid using HTML5 section and article elements (screen readers are a bit funny with those)
• Use ARIA roles and labels when appropriate
• Use HTML5 form controls when applicable to trigger the right keyboard on mobile (url, email…)