Main reference: http://thesassway.com/advanced/modular-css-naming-conventions. I don't like BEM because I like lowercase and dashed in css
- Objects traditionally are nouns. They take the form of:
.noun {} // examples: .button, .menu, .textbox, .header- Parent-Child relationships are also nouns:
.noun {} // parent: .post
.noun-noun {} // child: .post-title- To use the Plural Parent Patern, simply pluralize the name of the parent object (the container). Here it is in action for marking up a group of tabs
.tabs {} // parent
.tab {} // child- Subclasses are often preceeded by a adjective describing the type of object:
.adjective-noun {} // example: .dropdown-button- And Modifiers are almost always adjectives (or are used descriptively):
.is-state {} // state: is-selected, is-hidden
.adjective {} // examples: .left, .right, .block, .inlineRef: