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

Question

[Владимир Т.]

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

/* buttons.css */
.primary {
  composes: button;
  // здесь специфичные стили
}

А использовать буду вот так:

import buttons from './styles/buttons.css';
innerHTML = `<button class="${buttons.primary}">`;

Но как правильно описывать модификаторы? Например: big, small или состояние toggle (нажата/отжата)?

Answer 1

[Владимир Т.]

Разобрался сам. Как написано в этой статье glenmaddern.com/articles/css-modules - "сomposition is everything". Это значит, что я не правильно понял метод. До этого я применял в проектах яндексовский БЭМ. В их варианте есть модификатор - дополнительный класс для основного класса. В CSS-modules такого нет и каждый класс отдельный и составляется из других классов. То бишь если мне нужна обычная кнопка, то я использую класс buttons.default содержащий базовый стиль. Если нужна обычная большая, то buttons.defaultBig.