Как правильно устанавливать внешние отступы для компонентов с использованием CSS модулей?

Question

[moreqa]

Здравствуйте, как правильно поступать в следующей ситуации? Допустим, есть некоторый компонент, который встречается в разных блоках на странице и в каждом из этих блоков он имеет разный марджин.

В случае применения БЭМ можно сделать этот компонент элементом блока:
<div class="component block__component">...</div>
Либо задать ему модификатор:
<div class="component component_margin">...</div>
И для этих классов задавать необходимые стили.

Но каким образом правильно поступать в случае использования CSS-модулей в react?

Лично мне в голову приходит два варианта:
1. В нужном месте оборачивать компонент в какой-либо враппер и писать стили в уже для этой обертки в родительском компоненте
2. Передавать из родительского компонента некоторый проп и в зависимости от него устанавливать компоненту класс, при этом стили для отступов писать в модуле компонента

Оба из них мне кажутся не очень удобными, в сравнении с тем же БЭМом. Возможно существуют более хорошие варианты использования модификаторов при работе с CSS-модулями?

Также буду благодарен если поделитесь хорошими статейками/докладами по CSS-модулям, которые было бы полезно изучить.

Answer 1

[Александр Васильев]

Не знаю, как в реакте, но в методологии бэм …
« Чтобы компонент оставался независимым, CSS-свойства, которые помешают его переиспользовать в другом окружении (например, margin и position), задают через родительский блок.»