Практика #5

Посмотрите на единицу измерения vmin

ДЗ #4

Сегодня в программе:

  1. Два новых макета
  2. Все элементы уже верстали
  3. Учимся использовать компонентный и БЭМ

Зачем?

  1. Избавляет от боли со сложностью css селекторов
  2. Добавляет инкапсуляцию стилям
  3. Добавляет семантичности разметке
  4. Позволяет переиспользовать стили
  5. Упрощает рефакторинг

.block

Логически и функционально независимый компонент страницы. Блок инкапсулирует в себе поведение, разметку и стили. Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.

.block__element

Элемент – это часть блока, отвечающая за отдельную функцию.
Он может находиться только в составе блока и не имеет смысла в отрыве от него.

.block__elem_mod

БЭМ-сущность, определяющая внешний вид, состояние и поведение блока.

Сокращённые модификаторы

.block-name__elem_key_value
<div class="block-name block-name_key1_val1 block-name_key2_val2 block-name_key3_val3">
<div class="block-name _key1_val1 _key2_val2 _key3_val3">
_key_value

Элементы элементов

.form-buy-results__to-city__slider__tab__column_buy

Элементы элементов

<div class="table">
    <div class="table__row">
        <div class="table__cell">
        ...
    </div>
    <a href="" class="table__row">
        <div class="table__cell">
        ...
    </a>
</div>

Внешняя геометрия

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

Макеты

#1. https://bit.ly/2qKxxSy

#2. https://bit.ly/2B2QZ2V

Практика #5

By frontschool-nsk

Made with Slides.com

Практика #5

  • 131

More from frontschool-nsk