SMACSS or BEM Methodology

SMACSS or BEM Methodology

Choosing between SMACSS and BEM Methodology

 

  SMACSS BEM
What it is Style Guide and not a framework with lax naming convention Style Guide with specific naming convention and have optional framework provisions
Style Categories
  • Base - are element, attribute, pseudo-class selectors
  • Layout - is for sectioning (Prefixed with `l` or `layout` as in `.l-header`)
  • Modules - are reusable parts of your site (Starts with the module name and child modules and elements contain the parent module’s name)
  • State - how a module will look on different screens, inside an element, when clicked, etc.. (Named similar to boolean variables e.g. `.is-hidden`). State that belongs to a module should have the module’s name `.is-module-state`
  • Themes - similar to state in that it affects your base, layout and modules
  • Block (Namespace) - any reusable component that answers “What is it”. It can have any number of nesting. Elements in a block are optional
  • Element - an entity inside a block that answers “What is this” and cannot exist without a block. It can be nested but styling is always single-level from its block.
  • Modifier (State) - entity that defines appearance, state or behavior of a block or element.
CSS Selectors Ok to use tag and ID selectors on layout elements but not on modules tag and ID selectors are prohibited, everything use `.class` selectors
!important Use sparingly and only on states Unlikely because styles are namespaced in their blocks
Theming Themes have their own files that override the module styles Themes are treated as modifiers
CSS Media Queries Placed next to the module it handles Inside the block following its rule on reuse