Описание Бэм
На мой взгляд то, что описано в этой статье это единственно правильный и возможный вариант использования БЭМ стэка. По БЭМ-методологии блоки не уникальны и их всегда можно использовать повторно, поэтому в описании CSS-правил отказались от использования id. Можно как взять часть идеологии, например систему именования классов, так и полностью перейти на инструментарий БЭМ, который даёт инструменты сборки для HTML/JS/CSS, описанных по БЭМ-методу. Описанное выше правило именования элементов является частью более общей концепции «БЭМ», которая разработана в Яндексе.
Но мы рекомендуем придерживаться описанной выше схемы, так как инструменты БЭМ-платформы умеют работать именно с данным вариантом именования.
Например, есть модуль (блок) модального окна, блок телефона, блок кнопки. Много свойств — много модификаторов. В шапке, примеру телефон выглядит обычно, а в модальном окне телефон выглядит по-другому. Мне, например, очень нравятся принципы специфичности (укаждого элемента свой класс) иинкапсулированности (все стили блока внутри блока).
Главный аргумент противников «классянки» в том, что нужно привязывать оформление к HTML-тегам и атрибутам. Также БЭМ хорош тем, что для его внедрения необязательно начинать снуля, тоесть для рефакторинга онтоже годится (правда небез костылей).
- Напишем разметку с помощью тегов: для картинки используем тег
- показывает, о каких сущностях идет речь
- , значит каждый блок должен предоставлять сброс для
- Совмещение нескольких модификаторов на одном и том же блоке (например,
- Библиотеку - можно подключать по аналогии с : добавить предварительно собранные файлы библиотеки и вставить их в страницы с помощью элементов
Читать и понимать его труднее. Виталий с командой сразу делал инструментарий для генерации шаблонов и стилей. Соответственно, эти элементы будут отображены «выше» остальных.
Что бывает, когда у вас заканчиваются теги и атрибуты, чтобы писать стили для них. Конечно, все началось с собственных потребностей Яндекса. Очень часто с таким встречался и встречаюсь. В недавнем докладе (React: CSS in JS), породившем множество дискуссий в среде фронтенд разработчиков, один из сотрудников Facebook озвучил проблемы с масштабированием CSS.
- По-моему, высмешали понятия «блок» (блочный элемент, например
- И, наконец, это не обязательно и не ошибка, но обычно элементы, которые являются ссылками или кнопками, оформляют в
- Например, среднестатистический зрячий пользователь знать не знает, что такое
- Пример выделения блоковэлементов
- Факторы, влияющие на вёрстку (Часть 2: Работа и Рабочий процесс)
Соответственно, для этого можно использовать картинку (на которой написать вручную текст), а можно воспользоваться особенностью position, либо z-index. Они даже не используют препроцессоры. Или еще.
По сути, модификация это предикат — всегда описывает связь между субъектом (блоком или элементом) и какой-то другой сущностью, которая чаще всего не представлена в БЭМ-пространстве собственным блоком или элементом. Описывается элемент собственным именем и именем блока которому он принадлежит. Не надо жонглировать цифрами в уме, а порядок в коде решает, что чем переопределяется. Все правильно вам сказали. БЭМ (Блок Элемент Модификатор) — методология, которая предоставляет решение по созданию архитектуры проекта.
Если несколько сущностей пересекаются по отдельным моментам деклараций, то какая из них будет иметь приоритет на узле, не зная предыстории, предсказать невозможно (блоки по умолчанию равны). Блок — независимый компонент страницы, который инкапсулирует внутри себя поведение (JavaScript) и внешний вид (CSS). Я собираю всё статически (с помощью gulp-twig), так что могу целиком сосредоточиться на создании великолепного интерфейса. Если же всё оформляется с помощью классов, освоить такое гораздо проще. Однако это порочная практика, поскольку такой код противоречит АНБ-принципам. Это постулированное правило, объясняемое исключительно из опыта и предположения, что для описания интерфейсов и следования АНБ-принципу достаточно двухуровневой структуры. Глобальный модификатор — это блок, который нужен только для того, чтобы примешиваться к другим блокам, придавая им какие-либо свойства. Обратная сторона такого подхода — увеличение количества сущностей.
Такое вполне может произойти и внутри вашей команды. В этом случае происходит подмена модификации (про свойства) блоком (про сущность) Отсутствие глобальных модификаторов это одно из принципиальных отличий БЭМ от других фреймворков. Самая главная рекомендация — «Не умножать сущностей без необходимости», т. е. Вот именно, так что теперь ваш код — беспорядочная мешанина из разных типов селекторов.
- Факторы, влияющие на вёрстку (Часть 1: Работа кодера)
- Несколько интересных кейсов с : потенциал и машинного обучения
- Тостер – вопросы и ответы для -специалистов
- БЭМ-методология организации -кода
- БЭМ-методология: с чего всё начиналось и зачем это всё нужно
- Как работать с -препроцессорами и БЭМ
Элемент — составная часть блока, которая не может использоваться в отрыве от него. У нас всего две страницы — можно поместить все стили в один файл. CSS код становится самодокументируемым. Элементы теперь инкапсулированы внутри блоков и изолированы от других элементов. Представляет собой отображение по оси 0Z. Вывод — в межблочных связях следует быть очень разборчивым.
Также, следует отличать микс от «глобальных модификаторов». Непойму только, чем вас неустраивает БЭМ как методология верстки.
Вот таким образом на сегодняшний день существует множество подходов к написанию стилей. Методология БЭМ никогда не предполагала, что HTML/CSS будут писать руками. Используете классы. Одна из наиболее интересных методологий родилась в Yandex.
- Информационный портал по безопасности
- Методология БЭМ: маленькие сайты
- Генерация названий селекторов в стиле БЭМ с помощью препроцессоров :: Хранитель заметок
- Вёрстка графических компонентов
- Пример правильного использования при верстке
- – лаконичная модификация БЭМ-методологии
- Применение БЭМ в различных -технологиях
- «-профессионал» – погружение в мир
Можно представить варианты решений, приходящих в голову на данном этапе. Микс — это совмещение разных БЭМ-сущностей на одних узлах DOM-дерева. Такой способ в терминологии БЭМ имеет название Микс. Элемент не существует без блока и имеет смысл только в рамках него. не плодить блоки.
CSS имеет ряд недостатков, которые приводят к вышеперечисленным проблемам. Пройдемся немного по понятиям. Тем самым достигается минимизация и повторное использование кода (во всех технологиях). Такой код быстро превращается в кашу. Здесь текст на слайдере необходимо вывести на картинке. Одна сущность (блок/элемент) может описываться множеством модификаторов. Этого и знать-то не нужно, ведь специфичность одна и та же.
Без компромиссов не обойтись иначе весь код не будет переносимым. Незаметно для себя мы одним махом решили целый ряд проблем. При миксовании предполагается достижение положительного комбинаторного эффекта, но наряду с очевидными плюсами, могут возникать неприятные побочные эффекты в виде наложения технологических деклараций. К тому же, мы находимся в офисах Яндекса в разных городах. Можно строить сложные композиции из простых блоков за счет «подмешивания» одних блоков к другим.
- Премиум уроки по созданию сайта
- БЭМ (как метод именования селекторов)
- Преобразование грязных -данных в чистое БЭМ-дерево
- Генерация названий селекторов в стиле БЭМ с помощью препроцессоров
- В прошлом году мы обсуждали ручную вёрстку по БЭМ
- Даже разработчики не смогли с первого раза правильно написать имена классов по БЭМ :)
Пытаемся потихоньку переходить на БЭМ, но есть для нас очевидные минусы или возможно мы не так что-то делаем. Идеи выглядят вполне здравыми, учитывая текущие аспекты дизайна.
Детали составляющие блок называются элементами. Становится легче отслеживать иерархические связи в пределах блока. Модификатор — описание блока или элемента. При желании можно использовать несколько блоков на одном HTML элементе. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом.
Благодаря независимости блока возможно его повторное использование в любом месте страницы. Второй способ гласит, что элементы с position: relative absolute отрисовываются отдельно от «остальных» элементов. Почему так происходит. Третий способ: z-index задается для сестринских элементов. Многие компании, не только Facebook, пытаются решить проблему масштабирования CSS. Поднимите руки, если помните наизусть специфичность button и main.
Нам сейчас интресна та часть, которая касается стилей. Миксование поощряет появление «лишних» межблочных связей.
