← #141 List branches sorted by most recent commit date
#142

Don't mix styles of an element with its container

Topics: CSS

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>
Fix a typo or suggest an improvement
#143 Skip questions when creating a package.json file