• 5 CSS Practices To Avoid as a Web Developer
  • Written by Alexey Shepelev
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Proofread by: KimYang, Chorer

Some people think THAT CSS is hard to learn, that CSS has a lot of pitfalls, and even a little magical, hard to understand, and easy to shoot yourself in the foot. I feel bad about that. After all, I don’t think so.

After considering what you can do, I’ve come up with five CSS practices that I hate to help you avoid these habits.

1. Set the inside and outside margins, and then reset them

I often see people setting margins inside and outside for all elements and then clearing the margin just written for the first or last element. I don’t know why you have to write two rules when one rule would solve the problem. It’s much easier to set margins for all the required elements at once!

To simplify CSS, you can use several selectors: the nTH-Child or nTH-of-Type selectors, and the not() pseudo-class or adjacent element combinator (that is, +).

Don’t write:

.item {
    margin-right: 1.6 rem;
}

.item:last-child {
    margin-right: 0;
}
Copy the code

You can write it like this:

.item:not(:last-child) {
    margin-right: 1.6 rem;
}
Copy the code

Or write:

.item:nth-child(n+2) {
    margin-left: 1.6 rem;
}
Copy the code

Or use:

.item + .item {
    margin-left: 1.6 rem;
}
Copy the code

2. Toposition 为 fixed 或 absoluteElement addition ofdisplay:block

You know what? You don’t need to add display:block to elements whose position is fixed or absolute, because that happens by default.

Also, if you use inline-* values on these elements, they will change as follows:

  • inline,inline-block -> block
  • inline-flex -> flex
  • inline-grid -> grid
  • inline-table -> table

Therefore, for elements whose position is fixed or absolute, you only need to set display when using flex layout or grid layout.

Don’t write:

.button::before {
    content: "";
    position: absolute;
    display: block;
}
Copy the code

Or don’t write:

.button::before {
    content: "";
    position: fixed;
    display: block;
}
Copy the code

Just like this:

.button::before {
    content: "";
    position: absolute;
}
Copy the code

Or write:

.button::before {
    content: "";
    position: fixed;
}
Copy the code

Use 3.transform: translate(-50%, -50%)Realize the center

There was a time when there was a very common problem that bothered developers. This continued until 2015, when all solutions to the problem were more or less flawed. The problem is to center an element of unspecified height in both horizontal and vertical directions.

In particular, one solution is to use a combination of the absolute location and transform properties. This technique can cause blurring of text in Chromium-based browsers.

After flexbox was introduced, HOWEVER, I decided that this solution was no longer suitable because of the text blurring and the fact that we had to use five attributes to center. Now I want to share with you a trick of reducing the code to just two properties.

Margin: Auto we can use margin: Auto inside the Flex container (just those two attributes, and that’s it!). . The browser automatically centers the element.

Don’t write:

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

Write it like this:

.parent {
    display: flex;
}

.child {
    margin: auto;
}
Copy the code

4. For block elementswidth: 100%

We often use Flexbox to create a multi-column grid and then convert to a single-column grid.

To convert a multi-column grid to a single-column grid, the developers used width: 100%. I don’t understand why they do this — grid elements are block elements and are 100% wide by default without using other attributes.

Therefore, instead of using width: 100%, we should write media queries so that Flexbox is only used to create multi-column grids.

Don’t write:


<div class="parent">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
</div>
Copy the code
.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
    width: 100%;
}

@media (min-width: 1024px) {
    .child {
        width: 25%; }}Copy the code

Write it like this:


<div class="parent">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
</div>
Copy the code
@media (min-width: 1024px) {
    .parent {
        display: flex;
        flex-wrap: wrap;
    }

    .child {
        width: 25%; }}Copy the code

5. Set up for the Flex projectdisplay: block

When using Flexbox, it is important to remember that when you create a Flex container (display: flex), all child items (Flex items) are converted to blocks.

This means that the display of all children is set to block by default.

  • inline,inline-block -> block
  • inline-flex -> flex
  • inline-grid -> grid
  • inline-table -> table

Therefore, there is no need to add display: block to the Flex project; the browser will do it for you.

Don’t do this:

.parent {
    display: flex;
}

.child {
    display: block;
}
Copy the code

You can just go like this:

.parent {
    display: flex;
}
Copy the code

summary

Hopefully, after reading this article, you’ll learn how to avoid these simple mistakes and follow my advice. Thanks for reading!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.