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