Ответ 1
Обычно с BEM, если они выглядят иначе, они разные.
Обычно.
Существует несколько различных вариантов обработки контекста и состояния с помощью BEM. У каждого есть разные плюсы и минусы, поэтому вы будете сильно зависеть от вашего варианта использования.
Первый вариант, который я упомянул, - использовать селекторы потомков. Вы уже определили этот выбор и столкнулись с обычной проблемой "где принадлежит код?"
В следующих примерах я буду полагаться на синтаксис LESS, это только для того, чтобы мне было легче продемонстрировать отношения в коде.
Селектор потомков
Если вы собираетесь использовать селектор потомков, я рекомендую, чтобы код был сгруппирован с дочерним блоком.
<Суб > widget.lessсуб >.widget {
&__container {
...
}
...
}
.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...
}
}
Конечно, это требует, чтобы разметка обновлялась для конкретного случая, когда она использовалась в панели, но затем она также открывает вам возможность использовать флажок с теми же стилями в другом месте.
Разный селектор
Я повторю свой первый пункт: Если они выглядят по-другому, они разные.
Это не значит, что вам нужно начинать с нуля на флажке. BEM позволяет создавать объектно-ориентированные стили. Придумайте новое имя и установите * флажок:
<Суб > checkbox.lessсуб >.checkbox {
&__label {
...
}
...
}
@import (reference) 'checkbox';
.checkbox-2 {
.checkbox;
&__label {
...overrides...
}
...overrides...
}
* в LESS Я использую mixin для этого, поскольку он обычно лучше подходит для расширения и переопределения стилей, чем использование функции :extend для языка. Не стесняйтесь использовать функцию :extend, просто помните, что порядок выбора имеет значение.
Refactor the Need Away
Иногда я сталкиваюсь с ситуациями, когда я хочу использовать селектор или модификатор потомков, потому что мне нужно набросать блок для целей позиционирования в контейнере.
В этих случаях я часто обнаруживаю, что сам контейнер - это то, что нужно изменить. Обычно я могу сказать, что это контейнер, когда мне нужно обновить дочерний, чтобы иметь разные:
- поля
- набивка
- Позиция
- верхний, правый, нижний, левый
- ширина
- Высота
- прогибается
Рефакторинг имеет другие проблемы, однако я часто заканчиваю использование контейнеров divs для нормализации области вставки для блоков, которые содержат другие блоки; YMMV.
tl; dr: Что я должен выбрать?
Можете ли вы (разумно) обновить разметку?
ДА: Если вы можете легко обновить разметку для использования разных классов, я бы рекомендовал расширить ваш блок checkbox как новый блок. Именование вещей сложно, поэтому обязательно укажите, какой из них где-то.
НЕТ: Если вы не можете легко обновить классы, использование модификаторов также не будет отличным выбором. Я бы порекомендовал пропустить этот вариант и вернуться к хорошему селектору . В BEM вы действительно хотите избежать селекторов-потомков, но иногда они являются правильным инструментом для работы.