Практика #5

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

ДЗ #4

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

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

Зачем?

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

.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