Photoshop Question posted in
The official user guide can be found here.

Bem naming conventions – Photoshop

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

Tags:

3

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

    To answer your question regarding the other names, I guess I would modify my answer slightly. Again, only using the --project modifier to style the other elements if they are indeed different than a hero on another page. 

    <div class="hero hero--project">
  <div class="grid">
    <h1 class="hero__title"></h1>
    <div class="hero__meta"></div>
    <p class="hero__summary"></p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    I’m new to BEM and trying to wrap my head around it all. I read one of the rules for BEM was no nested selectors. So based off the 2nd answer, let’s say we style the hero title to be black but style project hero titles to be red. Would the CSS look like this?

    .hero__title { color: #000; }
.hero--project .hero__title { color: #cc0000; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search