Search code examples
htmlcssbem

Bem naming conventions

im using the BEM naming convention within a small project and having some slight difficulty in deciding between element and modifier names.

I'm currently working on a hero/splash section of the website. see image below. enter image description here

Heres my current code -

<div class="hero hero__project">

    <div class="grid">

        <h1 class="hero__project__title">Final Year Project</h1>

        <div class="hero__project__meta">
            <p>Published<span>23 Oct 2014</span></p>
            <p>Applictions <span>Unity3d, Photoshop, 3ds max</span></p>
        </div>

        <p class="hero__project__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>

    </div>  

</div>

My question is - Do you understand what the piece of markup is doing? and is it in line with them BEM methodology. Thanks

Solution

  • As far as I understand BEM, I would say your naming does not make sense. Your Block (or module) would be your .hero. Your Elements would be your main components of your block (i.e. project-title, project-meta, etc). If you needed a modifier on your block for a different state, you could add one in addition to your block (e.g. class=".hero .hero--isHidden)

    <div class="hero">
  <div class="grid">
    <h1 class="hero__project-title"></h1>
    <div class="hero__project-meta"></div>
    <p class="hero__project-summary"></p>
  </div>
</div>

    For more in-depth info checkout http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/