evaluate BEM naming convention

[gasolin]

I noticed that the css selectors does not changed a lot in https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/tree/v2/style/headers

I'd like to hear @rnowm your opinion of adopting some syntax naming rules such as BEM http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

With this naming rule, we could easier recognize what this selector does, use more flatten css selector to applying styles, avoid cascade selector error which csslint reports.

With BEM naming style, the bb-header might looks like

.bb-header /* the block */
.bb-header__subheader /* the block with element */
.bb-header__menu
.bb-header__menu--action  /* the block with element and modifier */

For class inheritance, LESS can also come to help

.bb-header menu {
  height: 100%;
  padding: 0;
  margin: 0;
}

.bb-header__menu
@import bb-header

[gasolin]

Another kind of naming rule with same concept http://benfrain.com/modular-css-bem-oocss-naming/ for reference

 .namespace-ComponentName_ModifierName-variant-label

name-space : all lowercase/train-case (optional).
ComponentName : upper camel case (non-optional)
_ModifierName : upper camel case preceded by an underscore (optional)
-variant-label : all lowercase/train-case (optional)

or

.moduleName {}
.moduleName__element {}
.moduleName__element–is–modified {}