Соглашения об именах Бэм

Я использую соглашение об именах БЭМ в небольшом проекте и испытываю небольшие трудности с выбором между именами элементов и модификаторов.

В настоящее время я работаю над разделом hero/splash на сайте. см. изображение ниже. введите здесь описание изображения

Вот мой текущий код -

<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>

Мой вопрос: вы понимаете, что делает кусок разметки? и соответствует ли это их методологии БЭМ. Спасибо


html css bem
person Samuel    schedule 08.11.2014    source источник
comment
Вопрос не в том, но, по моему личному мнению, тире гораздо читабельнее, чем подчеркивания. hero__project__summary против hero-project-summary   -  person Schmalzy    schedule 08.11.2014
comment
Эй, я согласен с вами! Но в настоящее время я буду строгим, так как я все еще изучаю БЭМ. Я начну реализовывать свои собственные идеи, как только получу полное представление об этом.   -  person Samuel    schedule 08.11.2014
comment
попробуйте этот проект на getbem.com   -  person Vladimir Starkov    schedule 03.08.2015
comment
@VladimirStarkov Спасибо, почитаю!   -  person Samuel    schedule 06.08.2015

Ответы (3)


arrow_upward
4
arrow_downward

Насколько я понимаю БЭМ, я бы сказал, что ваше наименование не имеет смысла. Ваш блок (или модуль) будет вашим .hero. Ваши элементы будут вашими основными компонентами вашего блока (например, название проекта, мета проекта и т. д.). Если вам нужен модификатор в вашем блоке для другого состояния, вы можете добавить его в дополнение к вашему блоку (например, 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>

Для получения более подробной информации оформите заказ на http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

person skube    schedule 08.11.2014
comment
Эй, чувак, в настоящее время я работаю над страницей проекта на веб-сайте, поэтому причина для .hero__project в качестве моего основного блока ...... (для стиля страницы). кроме спасибо за ссылку, это было полезно. - person Samuel; 08.11.2014
comment
Я думаю, что смысл в том, чтобы .hero был модулем, который можно было бы использовать на любой странице. Если бы была определенная причина, по которой .hero отличается на странице проекта, вы могли бы, я думаю, использовать модификатор (например, class=".hero .hero--project), но оставить все остальное без изменений. - person skube; 08.11.2014
comment
Я изначально пошел с этим! но запутался, поэтому я оказался здесь. Спасибо - person Samuel; 08.11.2014
comment
Как насчет моих других имен классов. Останутся ли они прежними? например, hero__project-title vs hero--project-title? - person Samuel; 08.11.2014

arrow_upward
1
arrow_downward

Чтобы ответить на ваш вопрос о других именах, я думаю, что немного изменю свой ответ. Опять же, модификатор --project используется только для оформления других элементов, если они действительно отличаются от hero на другой странице.

<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>
person skube    schedule 09.11.2014

arrow_upward
0
arrow_downward

Я новичок в БЭМ и пытаюсь понять все это. Я читал, что одним из правил БЭМ было отсутствие вложенных селекторов. Итак, основываясь на втором ответе, предположим, что мы делаем название героя черным, а названия героев проекта — красным. Будет ли CSS выглядеть так?

.hero__title { color: #000; }
.hero--project .hero__title { color: #cc0000; }
person phteven    schedule 29.10.2015