Войти с помощью github
Форум /
9 years ago

БЭМинар №1. Верстаем веб-страницу по БЭМ методологии

dab
community
events
webinar

Здравствуйте, сегодня мы провели вебинар — «Верстаем веб-страницу по БЭМ-методологии». Надеюсь вам было интересно и полезные знания влились в ваши головы.

Видеозапись будет доступна в течении двух недель.

Ссылки для изучения: — Методология. Определения — История создания БЭМ — Видео: История создания БЭМ. Кратко, сбивчиво и неполно — Side effects in CSS — Методология. Организация файловой системы

Ссылка на слайды на github.com. Ссылка на проект.

Конфиг vim — это форк vimi.

Всем БЭМ.

9 years ago
belozer

Вопрос.

Допустим у нас есть блок list с элементами list__item. У нас есть блок last-news (который по сути является аналогом list). Он тоже имеет свои элементы. (каждая новость имеет дату и ссылку). Есть также блок events по сути копия last-news.

в итоге получается что-то похожее на это

<ul class="list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
</ul>

<ul class="last-news">
    <li class="last-news__item">
        <a class="link last-news__link"></a>
        <span class="last-news__date"></span>
    </li>
    <li class="last-news__item">
        <a class="link last-news__link"></a>
        <span class="last-news__date"></span>
    </li>
    <li class="last-news__item">
        <a class="link last-news__link"></a>
        <span class="last-news__date"></span>
    </li>
</ul>

<ul class="events">
    <li class="events__item">
        <a class="link events__link"></a>
        <span class="events__date"></span>
    </li>
    <li class="events__item">
        <a class="link events__link"></a>
        <span class="events__date"></span>
    </li>
    <li class="events__item">
        <a class="link events__link"></a>
        <span class="events__date"></span>
    </li>
</ul>

Это можно как-то оптимизировать через миксы?

9 years ago
tadatuta

@belozyorcev скорее всего да, но ответ зависит от того, что хочется получить в результате. Например, HTML вида ul>li можно строить благодаря шаблонам блока list, <a> — благодаря блоку link, а какие-то особенности внешнего вида и/или JS-поведение добавлять через миксы с блоком last-news и events соответственно.

9 years ago
belozer

Т.е. получается что-то типо этого:

<ul class="list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
</ul>

<ul class="list last-news">
    <li class="list__item">
        <a class="link"></a>
        <span class="date"></span>
    </li>
    <li class="list__item">
        <a class="link"></a>
        <span class="date"></span>
    </li>
    <li class="list__item">
        <a class="link"></a>
        <span class="date"></span>
    </li>
</ul>


<ul class="list events">
    <li class="list__item">
        <a class="link"></a>
        <span class="date"></span>
    </li>
    <li class="list__item">
        <a class="link"></a>
        <span class="date"></span>
    </li>
    <li class="list__item">
        <a class="link"></a>
        <span class="date"></span>
    </li>
</ul>

но чтобы стилизовать link нам нужно применять в такой ситуации каскад?

.events .link
{
    color: #f00;
}

.last-news .link
{
    font-size: 1.5rem;
}

Допускается ли такое решение методологией?

9 years ago
ghost

Всем привет! Спасибо за отличный вебинар!!! Только начал вникать в тему. Хотел разобрать следующий код, т.к. верстал сам на основе примеров компании mail

 <div class="content__body__section">
  <div class="related">
    <div class="related__title">
      <div class="title">Похожие статьи</div>
    </div>
    <ul class="related__list"><!--
   --><li class="related__list__item">
        <a class="article-preview" href="#">
          <div class="article-preview__image">
            <img class="article-preview__image__file" src="temp/80x80.png" alt=""/>
          </div>
          <div class="article-preview__body">
            <div class="article-preview__body__title">Название статьи
            </div>
          </div>
        </a>
      </li><!--
  --><li class="related__list__item">
        <a class="article-preview" href="#">
          <div class="article-preview__image">
            <img class="article-preview__image__file" src="temp/80x80.png" alt=""/>
           </div>
          <div class="article-preview__body">
            <div class="article-preview__body__title">Название статьи
            </div>
          </div>
        </a>
      </li><!--
  --><li class="related__list__item">
        <a class="article-preview" href="#">
          <div class="article-preview__image">
            <img class="article-preview__image__file" src="temp/80x80.png" alt=""/>
          </div>
          <div class="article-preview__body">
            <div class="article-preview__body__title">Название статьи
            </div>
          </div>
        </a>
      </li><!--
    --><li class="related__list__item">
        <a class="article-preview" href="#">
          <div class="article-preview__image">
            <img class="article-preview__image__file" src="temp/80x80.png" alt=""/>
          </div>
          <div class="article-preview__body">
            <div class="article-preview__body__title">Название статьи
            </div>
          </div>
        </a>
        </li><!--
  --></ul>
  </div>
</div>

1) Укажите пожалуйста на ошибки и объясните, что не так 2) Есть ли минусы у моего подхода?

P.S. Всегда рад критике и советам, которые направят меня в нужное русло

9 years ago
belozer

@bemcoder есть возможность оформления кода (для этого нужно указать три апострофа ` (на win-клавиатуре где буква ё) вначале и в конце кода )

9 years ago
belozer

@bemcoder

Элементы отделяются от блоков двойным подчёркиванием __ модификаторы одиночным _. Повторение каскада, но только в названии класса не есть БЭМ.

Вот например

.article-preview__body__title

что будет, если у тебя пропадёт уровень body в вёрстке? Это будет создавать лишнюю неразбериху. В добавок к этому возникнут трудности при работе с i-bem (а это очень классная и удобная штука)

для начала рекомендовал бы использовать

.article-preview__body-title

а лучше

.article-preview__title
9 years ago
ghost

Ага, спасибо! просто я пока тулзами не пользуюсь, пишу все вручную..

9 years ago
belozer

Это хорошо :) Что ручками. При использование bem-stub поймёшь его крутость.

9 years ago
kompolom

@bemcoder

верстал сам на основе примеров компании mail

ИМХО у них довольно странный подход к методологии. Возьми за основу первоисточник, Яндекс. Будет меньше путаницы.

9 years ago
dab

Привет. @bemcoder Спасибо за вопросы. Выше вам верно написали про принципы именования. Если переписать код в соответствии с ними, получится вот такое DOM-дерево:

Еще я убрал один div и примиксовал title к элементу __title блока related:

<div class="related__title title">
    Похожие статьи
</div>

Теперь можно отбирать узлы DOM-дерева c классом .related__title и доопределять блок title без использования каскада.

9 years ago
tadatuta

@belozyorcev

Допускается ли такое решение методологией?

да, вполне — родитель может знать о детях.

9 years ago
Drekrosh

@dab А есть ссылка на запись, чет не найду. Посмотреть хочу.

9 years ago
dab

@Rahnar запись должна быть в течении пары недель.

9 years ago
basilred

@dab, спасибо за вебинар, и ребятам из команды тоже, ответы на вопросы в чатике очень помогали. Из первых слайдов, как я понял, вебинар будет состоять из нескольких частей, с увеличением сложности поэтапно. А есть уже расписание следующих вебинаров?

9 years ago
dab

@basilred, благодарю за отзыв. Да, для плавного ввода в тему будет поэтапное усложнение. Точных дат пока нет. Планируем делать вебинары с перерывом около двух недель.

9 years ago
webelart

Здравствуйте! У меня появился вопрос относительно истории развития БЭМ. Перед 2008 годом были предложены правила именования блоков АНБ (абсолютно-независимые блоки). Где к каждому потомку блока приписывался класс основного родителя. В более современных версиях БЭМ предполагается более строгое наследование, элемент блока наследует все имена предыдущих родителей.

Каковы были основные причины такой модификации? Т.е. конфликт вложенности блоков отсутствует в html, также в css можно писать правила без создания дерева, тем самым обеспечивая быстрый поиск (минус — не видна структура). Вероятно, такой выбор связан с возможностью существования подобных именований в самом блоке. Но если проект небольшой и блоки небольшие, то такой конфликт вряд ли имеет место. Поясните, пожалуйста.

9 years ago
kompolom

@elena90 Можете показать на примере, что имеете ввиду?

9 years ago
belozer

@elena90 ты про такой вариант? page__content__header Как по мне - это не правильный вариант БЭМа. Такая конструкция создаёт сложности.

  1. Что будет, если из вёрстки пропадёт уровень content?
  2. Что будет, если будет п.1 ?

Лично у меня создаётся такое чувство, что они не поняли БЭМ и всячески его отрицают. АНБ - да, при таком именовании выполняется. Но вот переносимость стремится к нулю.

9 years ago
tadatuta

Если речь действительно о page__content__header, то БЭМ ничего такого никогда не рекомендовал.

9 years ago
webelart

@kompolom, @belozyorcev, @tadatuta Примеры: Подход АНБ (пример, взят c http://clubs.ya.ru/bem/replies.xml?item_no=43):

<div class="b-services">
    <h2 class="b-services__head">Сервисы</h2> 

    <ul class="b-services__list">
        <li class="b-services__item"><a href="" class="b-services__link">Крибли</a></li>
        <li class="b-services__item"><a href="" class="b-services__link">Крабли</a></li>
        <li class="b-services__item"><a href="" class="b-services__link">Бумс</a></li>
    </ul>
</div>

В современном БЭМе, как я понимаю, идет наслоение потомков (префиксы излишни, но это не столь принципиально):

<div class="services">
    <h2 class="services__head">Сервисы</h2>

    <ul class="services__list">
        <li class="services__list__item"><a href="" class="services__list__item__link">Крибли</a></li>
        <li class="services__list__item"><a href="" class="services__list__item__link">Крабли</a></li>
        <li class="services__list__item"><a href="" class="services__list__item__link">Бумс</a></li>
    </ul>
</div>

Вопрос в том, чем вызвано подобное усложнение именования потомков. Один из предполагаемых ответов, что, например, ссылка может быть не одна в блоке, можно добавить ее в шапку услуги (services_head) и тем самым избегается конфликт. Есть ли еще какие-либо причины?

9 years ago
Guria

@elena90 парсер вырезал лишнюю по его мнению разметку. Оформите, пожалуйста, ваши примеры с помощью блоков подсветки синтаксиса:

```html
Ваши примеры в html
```
9 years ago
kompolom

@elena90 от префиксов действительно практически отказались.
Насколько я понял, под

усложнение именования потомков

Вы имеете ввиду block__element вместо .block .element Если я понял правильно, то это избавляет от каскада, что ускоряет работу браузера со стилями, а также вносит ясность в стили.

9 years ago
tadatuta

@elena90 нет, в БЭМе за services__list__item принято бить по рукам. Правильный вариант как раз тот, который у вас в первом примере.

9 years ago
webelart

Всем спасибо за ответы! Некорректно поняла правильность современной разметки. Предполагала, что второй вариант верный. Буду дальше изучать. Но есть небольшое уточнение:

@tadatuta, вы написали: "в БЭМе за services__list__item принято бить по рукам."

Т.е. пример выше от bemcoder (20 марта 2015) тоже не совсем корректный? Часть кода:

<div class="related">
    <ul class="related__list">
       <li class="related__list__item">...</li>
    </ul>
</div>
9 years ago
Guria

@elena90 да. и в двух следующих комментариях об этом говорится

9 years ago
webelart

@Guria, спасибо! Все поняла!

9 years ago
basilred

@elena90, некоторые почему-то не любят, но мне нравился bem create из bem-tools. Он вам ни за что не даст создать подобную services__list__item конструкцию.

9 years ago
webelart

@basilred спасибо, учту! Пока bem-tools не использую в реальной жизни, только начила изучать.

Чтобы оставлять комментарии, необходимо авторизоваться.
Исходный код БЭМ_форумаСообщить об ошибке