@wakenbyWork

Как лучше подключать scss bem блоки?

Есть такая структура:

src
├── modules
│   ├── header
│   │   ├── header.json
│   │   ├── header.pug
│   │   ├── header.js
│   │   └── header.scss
│   └── footer
│       ├── footer.json
│       ├── footer.pug
│       ├── footer.js
│       └── footer.scss
└── styles
    └── styles.scss


И в modules лежат bem компоненты, и их может быть больше 150+

Я решил их подключать через glob:

@use 'src/modules/**/*.scss' as null;

И это все удобно, но порядок подключения компонентов иногда подводит. Компонент может быть элементом другого компонента, и случится так, что стили компонента будут иметь большую специфичность чем стили из микса элемента.

На примере:

<div class="card">
  <div class="button card__button"></div>
</div>


button.scss
.button {
  width: max-content;
}


card.scss
.card {
  &__button {
    width: 100%;
  }
}


Порядок подключения стилей:

@use 'src/modules/**/*.scss' as null;
⇅
@use 'src/modules/card.scss';
@use 'src/modules/button.scss';


В следствии чего card__button не сработает из за каскада подключения, чем стили .button.

Какие есть решения данной проблемы? Как вы подключаете bem блоки?

Вручную думаю это очень сложно следить за порядком подключения 200 компонентов, у меня есть идеи как повышать специфичность в данном кейсе, но интересно как вы поступаете в данной ситуации))
  • Вопрос задан
  • 154 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Не сваливайте все блоки в одну папку, а делите по уровням абстракции.
Кнопка – примитив
Карточка – компонент более высокого порядка, может содержать в себе в том числе кнопки.

@use primitives/**
@use components/**
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
neuotq
@neuotq
Прокрастинация
У вас немного напутанно в концепции БЭМ
Вы либо убираете с той кнопки стиль .button
Либо у вас для кнопки в карточке у кнопки в классах должно быть нечтно такое:
.button .button_card, те у вас модификация элемента button, если вы уж хотите развивать от центрального button.
Тогда в своём src/modules/card.scss (если следовать вашей структуре)
.card {
/* */
}
.button {
    &_card {
        width: 100%;
    }
}

Ну либо он вовсе не связан с тем бутон и тогда да, это вложенный элемент. Без родительского стиля .button и у него все стили свои в классе .card__button.
Ответ написан
ruslanshakir
@ruslanshakir
Russland
Не знал, что sass начал поддерживать glob pattern в импортах...

А что если сначала подключить стиль для кнопки, а потом все остальные:
@use 'src/modules/button.scss';
@use 'src/modules/**/*.scss';

По идее один и тот же файл повторно не должен подключаться
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы