Как правильно называть общие классы для UI элементов, если сайт использует методологию BEM в CSS?

Сайт использует методологию БЭМ и препроцессор SASS (SCSS). Я планирую организовать файлы SCSS для различных UI-элементов в отдельной папке ./UI/ и позже подключить их в main.scss. Возможно ли использовать следующую разметку? <br/> <pre><code class="html">&lt;div class="someblock"&gt;
  &lt;div class="someblock__form"&gt;
    &lt;button class="someblock__btn ui-btn--dark"&gt;Текст кнопки&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre> <br/> <br/> Есть ли возможность использовать класс .ui-btn--dark в разных секциях, в то время как классы типа .someblock__btn предназначены исключительно для позиционирования?
  • 22 января 2025 г. 17:44
Ответы на вопрос 1
Да, у вас есть возможность использовать общие классы, такие как `.ui-btn--dark`, в рамках методологии БЭМ вместе с вашими блоками и элементами. Это хороший подход для создания переиспользуемых стилей, так как они не привязаны к конкретному блоку и могут использоваться в различных контекстах.

Вот несколько рекомендаций по организации вашего кода:

1. **Общие классы**: Используйте общие классы (например, `.ui-btn--dark`) для оформления, которое может быть применимо ко множеству различных элементов. Это позволяет избежать дублирования и упрощает поддержку кода.

2. **BEM-синтаксис**: Классы по методологии БЭМ, такие как `.someblock__btn`, должны быть четко связаны с их блоком и использоваться для специфичного стиля и позиционирования элемента внутри этого блока. Эти элементы должны содержать логику, специфическую для данного блока.

3. **Комбинирование классов**: Как вы уже показали в примере, вы можете комбинировать классы. Таким образом, элемент может иметь как класс для стилизации, относящийся к общим UI-компонентам (`.ui-btn--dark`), так и классы, относящиеся к специфике блока (`.someblock__btn`). Это позволяет добиться нужной стилистики и функциональности для любого элемента на сайте.

Таким образом, использование класса `.ui-btn--dark` в разных секциях вполне допустимо, в то время как классы типа `.someblock__btn` предназначены для позиционирования и стилизации в контексте конкретного блока. Это сделает ваш код более гибким и удобоваримым для дальнейшего использования и поддержки.
Похожие вопросы