Skip to content

Latest commit

 

History

History
41 lines (32 loc) · 1023 Bytes

do-not-mix-styles-of-an-element-with-its-container.mdx

File metadata and controls

41 lines (32 loc) · 1023 Bytes
category cover created tags title
Practice
/assets/tips/do-not-mix-styles.png
2021-05-12
CSS
Do not 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>