Задать вопрос

Как правильно готовить css-modules?

Допустим есть класс button, который описывает базовую кнопку. Но фактически я буду использовать его потомков, а именно разные типы кнопок: default, primary, danger, etc. Тогда их я буду описывать вот так:
/* buttons.css */
.primary {
  composes: button;
  // здесь специфичные стили
}

А использовать буду вот так:
import buttons from './styles/buttons.css';
innerHTML = `<button class="${buttons.primary}">`;


Но как правильно описывать модификаторы? Например: big, small или состояние toggle (нажата/отжата)?
  • Вопрос задан
  • 744 просмотра
Подписаться 2 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
vachuahe
@vachuahe Автор вопроса
Разобрался сам. Как написано в этой статье glenmaddern.com/articles/css-modules - "сomposition is everything". Это значит, что я не правильно понял метод. До этого я применял в проектах яндексовский БЭМ. В их варианте есть модификатор - дополнительный класс для основного класса. В CSS-modules такого нет и каждый класс отдельный и составляется из других классов. То бишь если мне нужна обычная кнопка, то я использую класс buttons.default содержащий базовый стиль. Если нужна обычная большая, то buttons.defaultBig.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы