CSS Styleguide

IN PROGRESS

DO

hx-custom-element { 
  // No other way around this. This is vanilla CSS. :)
}

.hxBlockElement { 
  // Visually different from kebab-case-element selectors.
}

.hxBlockElement.-hxModifier { 
  /* 
    1) Hyphen prefix helps denote that this is a modifier class.
    2) Modifier classes should always be styled in combination 
       with other class or element selectors.
  */ 
}

DON'T

.hx-block-element { 
  // Too similar to kebab-case-element selector
}

.hxBlockElement--modifierClass { 
  /* 
    Class is too verbose, bloats HTML 
  */
}