Как назвать семантические разные элементы с одинаковым стилем в BEM?

Question

У меня есть два элемента в блоке, которые семантически разные, но должны выглядеть одинаково, кроме небольших различий. Как назвать их в BEM?

1. такой же класс для обоих с модификаторами для каждого? (сложно, потому что они очень разные семантически)
2. разных классов и присвоить им одинаковый стиль? (приводят к двум или более местам, где стилируется элемент)
3. разных классов и использовать CSS-постпроцессоры для микширования стилей? (похоже, лучший вариант, на самом деле проблема именования переводится на имя mixin)

Что лучше всего подходит для BEM для этой ситуации? Есть ли рекомендации?

Cheers, Jan

Answer 1

Я не могу думать о качестве стандарта для данной ситуации, но свести к минимуму изменения, необходимые в случае, если один изменения свойств и его поддерживать согласованность, в простом CSS, я думаю, что лучшая практика может быть это:

.elem1,.elem2{ 
    common-property:common-value; 
    common-property:common-value; 
} 
.elem1{ 
    peculiarity:style; 
} 
.elem2{ 
    peculiarity:style; 
} 

Если вы хотите сохранить multple CSSS или разделить ваш CSS следующий семантический и/или страницы раздела логики, я хотел бы предложить, чтобы сохранить общие стили в «общем» CSS (раздел) и добавьте особенности в соответствующие CSS/разделы.

Answer 2

Это интересный вопрос, и это то, над чем я тоже много боролся!

Вот как я сделал бы это в вашем случае. Подведем вверх два наиболее важных факта:

1. Компоненты очень разные семантически
2. Они должны выглядеть почти такой же

Не зная больше контекста о стилях, он будет трудно сказать, какой из них лучше всего подходит. Давайте разделим его на два основных случая.

Ключевым моментом здесь является то, что вы должны принять решение в этом случае вы:

• Случай 1: если они запланированы, чтобы иметь схожие стили, поэтому, если стили к одному изменение, стили к другому должны также следовать тем же изменениям;

• Дело 2: если эти два элемента имеют сходные стили.

Итак, основываясь на моем опыте, вот подход, я бы порекомендовал вам:

• Случай 1: Просто используйте общий класс для обоих элементов и использовать модификатор (ы) для каждого (или одного) из них.Попробуйте абстрагироваться как можно более общее, потому что элементы очень разные семантически.

  Например, если цвет тот же - аннотация его, определяя переменную/класс/mixin brand-color. Если размер тот же, отрисуйте его, указав container-width. Если маржа такая же, отрисуйте ее путем определения глобального margin.

  Вы могли бы рассмотреть абстрагирования не только один, но несколько подобных свойств в различных микро-абстракции (как примеры) и составляют смесь классов для каждого из двух элементов.

• Дело 2: Используйте разные классы и назначьте их в том же стиле.

  Возможно, это не так, и вы можете извлечь из этого выгоду. Если вы думаете об этом, эти два элемента имеют сходные стили - не нужно обновлять их оба в случае изменения одного стиля.

Конечно, во всех случаях, убедитесь, что вы делаете достаточно, чтобы расширить глобальную тему специфических свойств (например, brand-color, например), которые должны быть согласованы по всем элементам.

Надеюсь, мой вход помогает!