Jump to content
  • 0

Именование классов согласно БЭМ


xsladfs
 Share

Question

Доброго времени суток.
Подскажите пожалуйста, соответствуют ли имена классов методологии БЭМ ?

<div class="footer">    <div class="footer__row_1">        <div class="footer__row_1_column">            <h4 class="footer__row_1_column_title">Lacus interdum</h4>            <ul class="footer__row_1_column_list">                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>            </ul>        </div>    </div></div>
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Нет. Вот БЭМ:
 
блок
блок__элемент-блока
блок__элемент-блока_модификатор-элемента

Следуя вышеописному, вот так должна выглядеть ваша верстка, чтобы это был БЭМ:
 

<div class="footer">  <div class="footer__row">    <div class="footer__column">      <h4 class="footer__title">Lacus interdum</h4>            <ul class="footer__list">        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>      </ul>    </div>  </div></div>

footer - это блок (в данном случае он всего один)

footer__row - далее идут элементы этого блока
footer__column
footer__title
footer__list
footer__list-item
footer__link

Модификаторов тут нет.

Можно сделать более общий случай (тогда потребуется модификатор и два блока):

<div class="footer">  <div class="footer__row">    <div class="footer__column">      <h4 class="footer__title">Lacus interdum</h4>            <ul class="list list_footer">        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>      </ul>    </div>  </div></div>

footer - первый блок

footer__row - его элементы
footer__column
footer__title


list - второй блок

list_footer - его модификатор (частный случай именно для футера)

list__item - его элементы
list__link

  • Like 1
Link to comment
Share on other sites

  • 0

Нет. Вот БЭМ:

 

блок

блок__элемент-блока

блок__элемент-блока_модификатор-элемента

Следуя вышеописному, вот так должна выглядеть ваша верстка, чтобы это был БЭМ:

 

<div class="footer">  <div class="footer__row">    <div class="footer__column">      <h4 class="footer__title">Lacus interdum</h4>            <ul class="footer__list">        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>      </ul>    </div>  </div></div>

footer - это блок (в данном случае он всего один)

footer__row - далее идут элементы этого блока

footer__column

footer__title

footer__list

footer__list-item

footer__link

Модификаторов тут нет.

Можно сделать более общий случай (тогда потребуется модификатор и два блока):

<div class="footer">  <div class="footer__row">    <div class="footer__column">      <h4 class="footer__title">Lacus interdum</h4>            <ul class="list list_footer">        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>      </ul>    </div>  </div></div>

footer - первый блок

footer__row - его элементы

footer__column

footer__title

list - второй блок

list_footer - его модификатор (частный случай именно для футера)

list__item - его элементы

list__link

благодарю!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By stelmah.taganrog
      Сделал для себя учебную верстку по бесплатному макету. Вопросы на которые, возможно, мне смогут дать ответы более опытные верстальщики:
      - Постарался соблюсти принцип БЭМ для именования классов. Верно ли я применяю?
      - К сожалению, не удалось сделать, чтобы макет абсолютно соответсвовал PixelPerfect, особенно это заметно в тексте. Тестировал в Chrome 55.0.2883.87 (Windows 10). Подскажите на примере какого-нибудь блока в чем я делаю ошибки
      - Так же хотелось бы прочесть любую конструктивную критику

      Небольшое отступление, добавлю обязательно еще мобильный вариант и слайдеры, это в процессе. Хотелось бы узнать ошибки на том этапе, что выполнен.

      Исходники https://github.com/oleg-tgn/html-template-beautiful-things
      Демо https://oleg-tgn.github.io/html-template-beautiful-things/
    • By Endorphin
      https://github.com/AlekseyPn/alekseypn.github.io/blob/master/index.html
      вот есть верстка, разметку делал по свеже изученым материалам по разметке БЭМ, кто уже давно пользуется даннлй методологией оцените, интересно ваше мнение, и правильно ли я понял как нужно размечать по БЭМ, можете потыкаться по репозитозиторию, там есть еще несколько файлов. Заранее спасибо.
    • By Andrew_007
      Доброго времени суток!
       
      Осваиваю верстку по методологии БЭМ. Не совсем понятно как делать HTML разметку. Как я понимаю нужно именовать классами все теги и при этом все блоки состоят из элементов, дальше все элементы состоят из блоков, далее эти блоки состоят из элементов, далее эти элементы состоят из блоков и так далее?
      То есть непонятно как определить где блок а где элемент, согласно вложенности?
      Вот так например правильно? http://codepen.io/Andre_w/pen/EaLVJW?editors=100
       
      Правильно я понял разметку по БЭМ или не совсем?
    • By binomer
      Почитал про БЭМ в очередной раз. И задумался над одной вещью. Пусть у нас есть несколько блоков на странице. У каждого блока есть заголовок. Заголовки одинаковые. То есть их можно описать одними и теми же CSS-правилами.
       
      С одной стороны, логично заголовки обозначать как элементы блока. А с другой, так как они одинаковые, можно выделить в отдельный блок. Кто что думает по этому вопросу?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy