Блог

Главная - Вопросы по программированию - Существует ли соглашение для BEM, позволяющее отличать селекторы состояний от селекторов подклассов?

Существует ли соглашение для BEM, позволяющее отличать селекторы состояний от селекторов подклассов?

#html #css #bem

#HTML #css #bem

Вопрос:

Пример подклассования:

 <button class="button button--large">

Пример состояния:

 <button class="button button--open">

Эти два существенно отличаются. Однако я не смог найти ни одного соглашения BEM, которое проводило бы различие, они оба были бы записаны как модификаторы.

Я знаю другие методологии, которые могли бы сделать что-то подобное для состояния:

 <button class="button is-open">

или

 <button class="button is-button-open">

Комментарии:

1. Я бы просто выбрал, button button--active а не open, кнопка не открыта, но она активна, когда что-то открыто — если это имеет смысл

2. @AndyHolmes Я бы визуализировал неактивную кнопку таким образом, чтобы ее нажатие было бессмысленным, поскольку она неактивна. Словарное определение неактивного — «ничего не делать», но поскольку кнопка ожидает нажатия в обоих состояниях, в обоих состояниях она одинаково занята. Ни в одном из состояний я бы не сказал, что кнопка менее активна. Вот почему я думаю, что такое имя, как open, лучше.

3. Да, я понимаю, но сама кнопка не открыта, независимо от того, на что она влияет. Кнопки по умолчанию неактивны, поэтому :active при нажатии на них отображается состояние. Я думаю, вы слишком глубоко вникаете в определение слова active

4. @AndyHolmes Я думаю, что на самом деле имеет смысл думать о том, что кнопка управляет как неактивная по умолчанию, если она недоступна, а кнопка — как активатор. Нет смысла активировать активатор. Я думаю о :active скорее как о процессе щелчка, и именно так работает:active , он не ссылается на состояние после завершения щелчка. В html это состояние: фокус. Сама кнопка даже не обязательно должна быть открытой, мы можем рассматривать состояние компонента как открытое, где кнопка реагирует на это открытое состояние.

5. Кнопки по умолчанию неактивны, я не знаю, что еще вам сказать. Они активны только тогда, когда с ними взаимодействовали. Фокус — это когда элемент имеет фокус, активный — когда элемент находится в процессе щелчка — это не одно и то же. Честно говоря, я думаю, что вы идете по долгому и запутанному пути, когда спецификация HTML описывает все это очень четко.

Ответ №1:

В BEM нет официального правила для модификаторов состояний.

Но … на BEM в значительной степени повлияли методы, которые разработчики использовали ранее, например, SMACSS. В SMACSS есть руководство по написанию классов состояний, и в вашем случае это было бы так .is-open .

Разработчики, которых я знаю, пишут классы состояний в BEM, следуя этому шаблону : .[block]--is-[state] .

Это все еще допустимый класс-модификатор BEM, и его легко отличить от модификаторов, используемых для композиции статического стиля.