Методолгия БЭМ за 19 минут / Как правильно называть классы CSS

• Владислав Белецкий объясняет методологию БЭМ.  

• БЭМ расшифровывается как блок-элемент-модификатор.  

• БЭМ позволяет разделять конструкцию сайта на независимые компоненты.  

• Пример сайта с хедером и основной секцией.  

• БЭМ позволяет использовать элементы сайта в разных частях сайта.  

• Пример с логотипом, который можно использовать в разных местах сайта.  

• Пример верстки шапки сайта.  

• Создание блоков и элементов с использованием классов.  

• Пример с логотипом, меню и контактными данными.  

• Добавление дополнительных классов для элементов.  

• Пример с классом "хедер лога" для логотипа в шапке.  

• Использование модификаторов для изменения элементов.  

• Стилизация блоков и элементов.  

• Позиционирование элементов с использованием классов.  

• Модификаторы для изменения стилей элементов.  

• Избегать встроенных селекторов классов.  

• Пример с кнопкой "батон" и встроенным селектором.  

• Правильное использование классов для переноса стилей.  

• Важно точно указывать принадлежность классов в названиях блоков.  

• Пример: блок логотипа должен называться "хедер лога".  

• Соблюдение точной принадлежности помогает избежать ошибок и улучшает читаемость кода.  

• Групповые селекторы увеличивают связанность кода.  

• Пример: использование селектора "футер-путь" для применения стилей ко всем элементам в блоке.  

• Лучше использовать отдельные селекторы для каждого элемента, чтобы избежать связанности.  

• Каждый класс должен иметь одну ответственность.  

• Пример: блок "логотип" отвечает только за логотип, блок "меню" - только за меню.  

• Это помогает сохранить структуру кода и облегчает его переструктуризацию.  

• Блоки должны быть открыты только для модификации, а не для изменения.  

• Пример: блок логотипа можно модифицировать, но не изменять.  

• Модификаторы используются для изменения стилистики, а не для изменения самого блока.  

• Основная идея БЭМ - возможность переразбора верстки.  

• Пример: при создании новой секции можно использовать существующие элементы.  

• Важно учитывать возможность перераспределения классов для легкого понимания и переразбора верстки.  

• Подписывайтесь на канал и ставьте лайки.  

• Задавайте вопросы в комментариях, автор ответит на них.  

• Спасибо за просмотр и до встречи в следующем видео.