Skip to content

Instantly share code, notes, and snippets.

@dmfrancisco

dmfrancisco/bem.md

Last active January 25, 2023 20:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dmfrancisco/4967354 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dmfrancisco/4967354 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dmfrancisco revised this gist Feb 16, 2013. 1 changed file with 23 additions and 21 deletions.
    44 changes: 23 additions & 21 deletions bem.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,42 +1,44 @@
    BEM – meaning **block, element, modifier** – is a front-end naming methodology. CSSWizardry uses a naming scheme based on BEM, but honed by [Nicolas Gallagher](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/). The naming convention follows this pattern:

    .block {}
    .block__element {}
    .block--modifier {}
    .block {}
    .block__element {}
    .block--modifier {}

    - `.block` represents the higher level of an abstraction or component
    - `.block__element` represents a descendent of `.block` that helps form `.block` as a whole
    - `.block--modifier` represents a different state or version of `.block`

    By reading some HTML with some classes in, you can see how – if at all – the chunks are related; something might just be a component, something might be a child, or element, of that component, and something might be a variation or modifier of that component. To use an analogy/model, think how the following things and elements are related:

    .person{}
    .person__hand{}
    .person--female{}
    .person--female__hand{}
    .person__hand--left{}
    .person{}
    .person__hand{}
    .person--female{}
    .person--female__hand{}
    .person__hand--left{}

    Taking an example with ‘regular’ naming:

    <form class="site-search full">
    <input type="text" class="field">
    <input type="Submit" value ="Search" class="button">
    </form>
    <form class="site-search full">
    <input type="text" class="field">
    <input type="Submit" value ="Search" class="button">
    </form>

    These classes are farily loose, and don’t tell us much. Even though we can work it out, they’re very inexplicit. With BEM notation we would now have:

    <form class="site-search site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
    </form>
    <form class="site-search site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
    </form>

    If you are familiar with OOCSS then you will no doubt be familiar with the media object. In BEM form, the media object would now read:

    .media{}
    .media__img{}
    .media__img--rev{}
    .media__body{}
    .media{}
    .media__img{}
    .media__img--rev{}
    .media__body{}

    From the way this CSS is written we can already glean that `.media__img` and `.media__body` must live inside `.media` and that `.media__img--rev` is a slight variation on `.media__img`.

    [**Source**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
    ---

    [**Source**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
  2. dmfrancisco created this gist Feb 16, 2013.
    42 changes: 42 additions & 0 deletions bem.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    BEM – meaning **block, element, modifier** – is a front-end naming methodology. CSSWizardry uses a naming scheme based on BEM, but honed by [Nicolas Gallagher](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/). The naming convention follows this pattern:

    .block {}
    .block__element {}
    .block--modifier {}

    - `.block` represents the higher level of an abstraction or component
    - `.block__element` represents a descendent of `.block` that helps form `.block` as a whole
    - `.block--modifier` represents a different state or version of `.block`

    By reading some HTML with some classes in, you can see how – if at all – the chunks are related; something might just be a component, something might be a child, or element, of that component, and something might be a variation or modifier of that component. To use an analogy/model, think how the following things and elements are related:

    .person{}
    .person__hand{}
    .person--female{}
    .person--female__hand{}
    .person__hand--left{}

    Taking an example with ‘regular’ naming:

    <form class="site-search full">
    <input type="text" class="field">
    <input type="Submit" value ="Search" class="button">
    </form>

    These classes are farily loose, and don’t tell us much. Even though we can work it out, they’re very inexplicit. With BEM notation we would now have:

    <form class="site-search site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
    </form>

    If you are familiar with OOCSS then you will no doubt be familiar with the media object. In BEM form, the media object would now read:

    .media{}
    .media__img{}
    .media__img--rev{}
    .media__body{}

    From the way this CSS is written we can already glean that `.media__img` and `.media__body` must live inside `.media` and that `.media__img--rev` is a slight variation on `.media__img`.

    [**Source**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)