Don't mix styles of an element with its container

When developing a reusable component, we should follow the rule: the component should look like the same regardless where it's placed.
For example, the margin style in the following CSS is used for a specific use case where we want to have a space between .item and its sibling element.
.item {
margin: 1rem 0;
/* Other styles */
...;
}
It isn't recommended because it could be broken when you use item in another container. Instead, you should use a wrapper to separate the styles of element and its container:
.item-wrapper {
margin: 1rem 0;
}
The item class can be reused in different places without breaking the look and feel:
<div class="item-wrapper">
<div class="item">...</div>
</div>
<!-- Used in another wrapper -->
<div class="other-wrapper">
<div class="item">...</div>
</div>