Как правильно устанавливать внешние отступы для компонентов с использованием CSS модулей?
Здравствуйте, как правильно поступать в следующей ситуации? Допустим, есть некоторый компонент, который встречается в разных блоках на странице и в каждом из этих блоков он имеет разный марджин.
В случае применения БЭМ можно сделать этот компонент элементом блока: <div class="component block__component">...</div>
Либо задать ему модификатор: <div class="component component_margin">...</div>
И для этих классов задавать необходимые стили.
Но каким образом правильно поступать в случае использования CSS-модулей в react?
Лично мне в голову приходит два варианта:
1. В нужном месте оборачивать компонент в какой-либо враппер и писать стили в уже для этой обертки в родительском компоненте
2. Передавать из родительского компонента некоторый проп и в зависимости от него устанавливать компоненту класс, при этом стили для отступов писать в модуле компонента
Оба из них мне кажутся не очень удобными, в сравнении с тем же БЭМом. Возможно существуют более хорошие варианты использования модификаторов при работе с CSS-модулями?
Также буду благодарен если поделитесь хорошими статейками/докладами по CSS-модулям, которые было бы полезно изучить.
Не знаю, как в реакте, но в методологии бэм …
« Чтобы компонент оставался независимым, CSS-свойства, которые помешают его переиспользовать в другом окружении (например, margin и position), задают через родительский блок.»
Простой
