CSS namespacing/ architecture idea

Posted on   |   In   |  

Just come across an interesting idea for CSS

In a word, prefixed the class name with an indicator of the class' purpose and scope.

  • .o- // an object, an unstyled design pattern
  • .c- // a component, a styled piece of UI
  • .a- // an alteration, an UI-independent override
  • .t- // a theme, change UI appearance based on theme
  • .is-, .has-, .for- // state-based styles
  • .js- // used for binding behavior to components

In each layer of the inverted triangle, the scope of the styles get narrower and more specific. At the bottom of this is a layer of utility or helper classes, referred to as “trumps”, that contains high-specificity selectors (ref).

This probably become less important now when using Angular2 component with style attached, but still a good thought.

more: