Обычно с БЭМ, если они выглядят по-разному, они другие.
Обычно.
Существует несколько различных вариантов обработки контекста и состояния с помощью БЭМ. Каждый из них имеет свои плюсы и минусы, поэтому то, что вы используете, будет сильно зависеть от вашего варианта использования.
Первый вариант, о котором я упомяну, — это использование селекторов потомков. Вы уже определились с этим выбором и столкнулись с обычной проблемой: «Где этот код?»
В следующих примерах я буду использовать синтаксис LESS, это только для того, чтобы мне было проще продемонстрировать отношения в коде.
Селектор потомков
Если вы собираетесь использовать селектор потомков, я рекомендую сгруппировать код с дочерним блоком.
widget.less
.widget {
&__container {
...
}
...
}
checkbox.less
.checkbox {
&__label {
...
}
...
// using inversion to override checkbox styles in a widget
// this will render to `.widget .checkbox` instead of
// `.checkbox .widget` due to the `&` placement
.widget & {
}
}
Причина, по которой я рекомендую связывать стили с внутренним блоком, заключается в том, что стили будут влиять на флажок, а порядок каскадирования будет важен.
Если бы стили были связаны с родительским элементом, изменение порядка родительских стилей относительно дочерних стилей могло бы отрицательно сказаться на отображении стилей.
Рассмотрим этот порядок включения:
site.less
@import 'widget';
@import 'checkbox';
Если бы стили были частью виджета, их можно было бы переопределить селектором такой же специфичности в checkbox.less.
Модификаторы
Я рекомендую использовать модификаторы для состояния. Обычно я не считаю положение или контекст «состоянием», поэтому модификаторы могут быть неуместны. Кроме того, несколько модификаторов для одного и того же элемента может быть трудно обосновать и, следовательно, трудно стилизовать.
Предполагая, что вы не используете модификатор в блоке checkbox, может быть проще добавить модификатор для случая, когда он используется в панели.
.checkbox {
&__label {
...defaults...
}
...defaults...
&--alt {
&__label {
...overrides...
}
...overrides...
}
}
Конечно, это требует, чтобы разметка была обновлена для конкретного случая, когда она используется на панели, но тогда вы также открываете возможность использовать флажок с теми же стилями в других местах.
Другой селектор
Я повторю свой первый тезис: Если они выглядят по-разному, они другие.
Это не означает, что вам нужно начинать с нуля с флажка. БЭМ допускает объектно-ориентированные стили. Придумайте новое имя и расширьте* флажок:
checkbox.less
.checkbox {
&__label {
...
}
...
}
checkbox-2.less
@import (reference) 'checkbox';
.checkbox-2 {
.checkbox;
&__label {
...overrides...
}
...overrides...
}
* в LESS я использую миксин для этого, так как он обычно лучше подходит для расширения и переопределения стилей, чем использование функции :extend языка. Не стесняйтесь использовать функцию :extend, но помните, что порядок селекторов имеет значение.
Рефакторинг необходимости
Иногда я сталкиваюсь со случаями, когда я хочу использовать селектор или модификатор потомка, потому что мне нужно поднять блок для позиционирования в контейнере.
В таких случаях я часто обнаруживаю, что следует изменить сам контейнер. Обычно я могу сказать, что это контейнер, когда мне нужно обновить дочерний элемент, чтобы он отличался:
- поля
- набивка
- должность
- сверху, справа, снизу, слева
- ширина
- высота
- сгибаться
Рефакторинг сопряжен с другими проблемами, однако я часто заканчиваю тем, что использую контейнерные элементы div для нормализации области вставки для блоков, содержащих другие блоки; YMMV.
tl;dr: Что выбрать?
Можете ли вы (разумно) обновить разметку?
ДА: если вы можете легко обновить разметку для использования разных классов, я бы рекомендовал расширить блок checkbox как новый блок. Однако называть вещи сложно, поэтому обязательно задокументируйте, где что.
НЕТ: если вы не можете легко обновлять классы, использование модификаторов также не лучший выбор. Я бы рекомендовал пропустить это и вернуться к старому доброму селектору потомков. В БЭМ вы действительно хотите избежать селекторов потомков, но иногда они являются правильным инструментом для работы.
person
zzzzBov
schedule
09.05.2016
