Верстальщик html страницmariia.belogubova@gmail.com

БЭМ методология с примерами

БЭМ методология

CSS архитектура, которая разбивает верстку на блоки

Дата основания: 23 сентября 1997 г.

Используют компании: Яндекс, Google, Epam, BBC, Alfa-Bank ...

Документация: читайте у основателя методологии Яндекс.

Другие CSS архитектуры: OOCSS, SMACSS.

Как верстали до появления БЭМ

Предыстория

#navigazia div > div a {
color: blue;
margin: 10px !important;
}

Плохие практики:

  • Длинный каскад - вложенность больше двух.
  • Стилизация по идентификаторам и тегам.
  • Использование !important.
  • Разнообразие в именовании классов одной сущности. Пример: имя класса для сущности "Навигация" писали кому как видится - кириллицей navigazia, либо menuNav, либо menu_link, NAV...

Преимущества

Почему компании используют БЭМ?

Почему вам стоит знать БЭМ?

  • Код менее связанный. Блоки играют роль компонентов сайта и могут безболезненно, а именно независимо от окружения, использоваться в любой области проекта.
  • Ускоряет разработку проекта.
  • Многие компании используют в своих проектах БЭМ, следовательно его стоит знать и понимать. На собеседовании вас обязательно спросят про основные понятия, а в тестовом задание посмотрят как вы его используете.
БЭМ удаляет лишние связи

Основы

Понятия и схема именования

Разбиение сущности по БЭМ на примере торта

Аббревиатура БЭМ включает в себя три основных понятия
Блок,
Элемент,
Модификатор.

  • БЛОК - самостоятельная сущность, которая может быть вызвана в любой части страницы.

    • Название блока отвечает на вопрос: "Что это?"
    • Блок не влияет на свое окружение!
    • Блоки можно вкладывать друг в друга.
    • Блок не обязан содержать внутри себя элемент.

    имя-блока

    Пример:

    <div class="cake">
    ...
    </div>
  • ЭЛЕМЕНТ - то из чего состоит блок. Элемента не может существовать вне блока.

    • Название элемента отвечает на вопрос: "Что это?"
    • Элемент не используется вне родительского блока
    • Именовать элемент надо всегда от родительского блока. Не допустимо использовать элемент элемента!

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

    Пример:

    <div class="cake__decoration">...</div>
    <div class="cake__shell">...</div>
    <div class="cake__filling">...</div>
  • МОДИФИКАТОР - состояние и поведение блока и элемента.

    • Модификатор отвечает на вопрос: "Какой?"
    • Модификатор используем совместно либо с блоком, либо с элементом.

    имя-блока_имя-модификатора

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

    Пример:

    <div class="cake cake_festive">...</div>
    <div class="cake__decoration cake__decoration_berry">...</div>

Отличная статья про именование классов - "Слова, часто используемые в CSS-классах".

Примеры использования

HTML + CSS

На примере ссылок

Ссылка в тексте для перехода на другую страницу
<a href='/' class='link'>Ссылка</>
<a href='/' class='link  link_independent'>Ссылка вне тексте для перехода на другую страницу</>
<a href='/' class='link link--download'>Ссылка в тексте для перехода на другую страницу</>

На примере социальных кнопок

<ul class="icon-social">
<li class="icon-social__item">
<a href="" class="icon-social__item-link icon-social__item-link_vk" target="_blank"></a>
</li>
<li class="icon-social__item">
<a href="https://www.instagram.com/wwwpages/" class="icon-social__item-link icon-social__item-link_instagram" target="_blank"></a>
</li>
<li class="icon-social__item">
<a href="" class="icon-social__item-link icon-social__item-link_youtube" target="_blank"></a>
</li>
</ul>

На примере карточек

Домашнее задание. Ниже представлены две карточки с текстом и с кнопкой. Используя полученные знания по методологии БЭМ, назовите классы для каждой карточки.

Ответ присылайте на почту с заголовком "ДЗ по БЭМ". Почта указана в контактах или нажмите на кнопку "НАПИСАТЬ ОТВЕТ".

Прогрессивное улучшение. Mobile First и Desktop First

О современной адаптивной версте. Почему выбирают подход Mobile-first или Desktop-first...

Читать

Верстаем свое личное веб-портфолио

От НУЛЯ до личного портфолия в интернете. Практическое руководство для начинающих верстальщиков.

Читать

Частые вопросы на собеседование

То что могут спросить при устройстве на работу

Что такое БЭМ?

Блок может быть внутри блока?

Можно ли писать элемент элементу (имя-элемента_имя-элемента)?

Контакт

mariia.belogubova@gmail.com

Информация, которую стоит указать в письме:

  • Имя, роль, контакты
  • Краткое описание проекта или список проблем.
  • Срок сдачи проекта
  • Бюджет проекта
  • Как вы обо мне узнали?

По любым вопросам пишите на почту

Написать письмо