1️⃣
Разметка
  • 1. 1. Введение
  • 1. 2. Введение в HTML
  • 1. 3. Подходы к разметке
  • 1. 4. Работа со спецификацией
  • 1. 5. Проверка валидности
  • 1. 6. Часто используемые теги и типовые ошибки
  • 1. 7. Методика семантической разметки
    • 1. 7. 1. Определяем DOCTYPE
    • 1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта
    • 1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы
    • 1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов
    • 1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
    • 1. 7. 6. Шаг 5. Размечаем фразовые элементы
  • 1. 8. Использование тега br
  • 1. 9. DOCTYPE
  • 1. 10. Как работает атрибут target
  • 1. 11. Правильное использование ссылок и кнопок
  • 1. 12. Как делать пустые ссылки?
  • 1. 13. Как правильно скрывать элементы?
  • 1. 14. Когда применять список терминов (dl)?
  • 1. 15. Как использовать ссылки mailto: и tel:
  • 1. 16. Именование сущностей
  • 1. 17. Разметка по БЭМ
    • 1. 17. 1. Введение
    • 1. 17. 2. Предыстория
    • 1. 17. 3. Частые проблемы из-за неправильной CSS-архитектуры проекта
    • 1. 17. 4. Основные понятия
    • 1. 17. 5. Свод правил БЭМ-а
    • 1. 17. 6. БЭМ для CMS
    • 1. 17. 7. Названия классов по БЭМ
    • 1. 17. 8. БЭМ — это про компоненты
    • 1. 17. 9. Темизация
    • 1. 17. 10. Плюсы и минусы БЭМ
    • 1. 17. 11. Алгоритм выделения блоков
    • 1. 17. 12. Типовые интерфейсные решения
    • 1. 17. 13. Блоки и элементы
    • 1. 17. 14. Миксы блоков и элементов
    • 1. 17. 15. Модификаторы блоков и элементов
    • 1. 17. 16. Типовые ошибки
  • Дополнительные материалы
Powered by GitBook
On this page
  • Плюсы
  • Минусы
  1. 1. 17. Разметка по БЭМ

1. 17. 10. Плюсы и минусы БЭМ

Плюсов в БЭМ больше, с них и начнём.

Плюсы

  • Простота — низкий порог вхождения в технологию, даже новичок может использовать БЭМ в своём проекте.

  • Гибкость — БЭМ-сущности формируются под нужды и специфику проекта. Нет чётких правил, что одни сущности отвечают только за сетки, а другие — только за темы (можно сравнить со SMACSS).

  • Независимость — компоненты создаются так, чтобы их можно было легко переносить из проекта в проект без каких-либо доработок.

  • Командная разработка интерфейса — монолит макета делится на независимые блоки, которые разрабатываются отдельными участниками команды, возможна параллельная работа, кто-то собирает эти блоки вместе.

  • Лучшая производительность — из-за того, что БЭМ не использует вложенные селекторы, браузеры быстрее вычисляют специфичность селекторов и быстрее обрабатывают правило. Правда некоторые источники утверждают, что современные движки браузеров достаточно эффективны, и практически во всех сложных случаях (за исключением разве что самых экстремальных) выигрыш в скорости пренебрежительно мал.

  • Понятность (человекочитаемость) — вопрос больших проектов, структура проекта прозрачна, всё что относится к блоку/компоненту собрано внутри одной папки. Простые селекторы помогают быстрее понять ваш код другим разработчикам и вам по прошествии некоторого промежутка времени.

  • Меньше конфликтов при определении стилей для элемента — имена классов уникальные и не повторяются. Перебивать вес селекторов не нужно. Как правило, достаточно сделать модификатор (возможно, придётся использовать флаг !important только для внешних библиотек, чтобы перебить правило, которое мы не имеем права переписывать).

  • Расширяемость — официальную документацию по БЭМу каждая команда может расширить своими мыслями и опытом набитых шишек. Хотя это уже не совсем БЭМ, а какой-то расширенный вариант БЭМ для вашей команды/компании.

А ещё БЭМ помогает новичкам сформировать компонентное мышление. Это облегчает расширяемость проекта, ведь все компоненты независимы, любой из них легко изменить, и эти изменения не затронут другие компоненты. А значит, меньше шансов что-либо сломать.

Минусы

  • Увеличение объёма файлов со стилями (каждый DOM-узел с классом, плюс длинные названия классов и несколько классов для одного узла, возможно, дублирование стилей). Проблему можно решить за счёт минификации итоговых файлов со стилями и добавлением в сборку только нужных файлов.

  • «Страшный» HTML-код (в разметке появляется куча классов). В исходный код страницы с разметкой пользователи заглядывают редко. Так что если вы раздумываете, использовать или не использовать БЭМ, то этот пункт вряд ли будет решающим.

  • Сложности при реализации. В стилях каждый компонент — это отдельный файл (в CSS есть директива @import), а вот писать компонентно на «ванильном» HTML — это проблема. Пока что, к сожалению, нет подходящих инструментов для сборки. В таком процессе разработки тяжело сделать декомпозицию.

Previous1. 17. 9. ТемизацияNext1. 17. 11. Алгоритм выделения блоков

Last updated 1 year ago