BEM and SMACSS: Advice From Developers Who’ve Been There

Block represents an object in your website. For example:

  • a person
  • a login form
  • a menu
  • a search form

An Element is a component within the block that performs a particular function. It should only make sense in the context of its block. For example:

  • a hand
  • a login button
  • a menu item
  • a search input field

Modifier is how we represent the variations of a block. For example:

  • a female person
  • a condensed login form (e.g. we’re hiding the labels in one version)
  • a menu modified to look differently for a footer or sitemap
  • a search input field with a particular button style

what is BEM css


source

Leave a Reply

Your email address will not be published. Required fields are marked *