How to properly set margins for components using CSS Modules?

Question

css

Hello, what is the right thing to do in the following situation? Let's say there is some component that occurs in different blocks on the page, and in each of these blocks it has a different margin.

If you use BEM, you can make this component a block element: Or set a modifier for it: And set the necessary styles for these classes. But what is the right thing to do when using CSS modules in react? Personally, two options come to my mind: 1. Wrap the component in a wrapper in the right place and write styles for this wrapper in the parent component
<div class="component block__component">...</div>
<div class="component component_margin">...</div>



2. Pass some prop from the parent component and, depending on it, set the component class, while writing the styles for the indents in the component module.

Both of them seem to me not very convenient, in comparison with the same BEM. Perhaps there are better ways to use modifiers when working with CSS modules?

I will also be grateful if you share good articles / reports on CSS modules that would be useful to study.

Answer 1

I don’t know how it is in React, but in the bam methodology…
“In order for a component to remain independent, CSS properties that prevent it from being reused in another environment (for example, margin and position) are set through the parent block.”