How to properly prepare css-modules?

Question

css

Let's say we have a button class that describes a basic button. But in fact, I will use its descendants, namely different types of buttons: default, primary, danger, etc. Then I will describe them like this:

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

And I will use it like this:

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

But what is the right way to describe modifiers? For example: big, small or toggle state (pressed/released)?

Answer 1

Figured it out myself. As written in this article glenmaddern.com/articles/css-modules - "composition is everything". This means that I misunderstood the method. Before that, I used Yandex BEM in projects. In their version there is a modifier - an additional class for the main class. There is no such thing in CSS modules and each class is separate and is made up of other classes. That is, if I need a regular button, then I use the buttons.default class containing the base style. If you need a regular big one, then buttons.defaultBig.