Betterprogramming. Pub / 5-CSS-PRACT…

1. Set margin and padding, then reset them

I always see people setting margin or padding for all elements and then resetting the first or last element. It can be done with one rule instead of two. You can set the selected element directly at once. Do this using the nth-Child /nth-of-type selector and the :not() pseudo-class selector or adjacency selector.

Don’t do this:

.item {
  margin-right: 1.6 rem;
}

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

can

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

Or:

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

Or:

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

2. There is no need to set display:block for position: absolute or fixed

You know there’s no need to set display:block for position: absolute or fixed because position: absolute or fixed is itself display:block

Of course, when you set display:block to inline-* elements, they change accordingly: Inline or inline-block becomes block, inline-flex -> flex, inline-grid -> grid, and inline-table -> table.

Don’t do that

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

or

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

can

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

or

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

3. Center transform: Translate (-50%, -50%)

There is a problem that often causes a lot of trouble. This continued into 2015, and all the solutions created some kind of difficulty. I’m talking about having an arbitrarily high element centered on both axes.

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

But with the introduction of flexbox, in my opinion, this technology is no longer important. The problem is that it doesn’t solve the problem of ambiguous text. More importantly, it lets you use five attributes. Therefore, I want to share a technique that can reduce code to just two attributes.

We can use Margin: Auto on the Flexbox container child, and the browser centers the element. Only two attributes are required to do this.

Don’t do this:

.parent {
  position: relative;
}

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

It could be written like this:

.parent {
  display: flex;
}

.child {
  margin: auto;
}
Copy the code

4. Set the width of the block’s elements

We often use display: Flex to create a multi-column grid and gradually convert to a single column. When converting multiple columns to a single column layout, some developers use width: 100%. I don’t know why they do this, because the elements of a multi-column layout are themselves blocks and don’t require additional styling. Therefore, instead of using width: 100%, we should write the media query so that display: Flex is only used to create a multi-column grid.

Don’t do 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
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

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

It could be written 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 display: block for the Flex element entry

When using the display: flex attribute, it is important to know that all children below the parent element (display: flex) are automatically set to display: block.

This means that the display of child elements will only be set to block. Accordingly, if you set inline or inline-block, it changes to block, inline-flex -> flex, inline-grid -> grid, and inline-table -> table.

Therefore, you don’t need to add display: block to the display: flex child. The browser will do it for you.

Don’t do this:

.parent {
  display: flex;
}

.child {
  display: block;
}
Copy the code

Here’s what you can do:

.parent {
  display: flex;
}
Copy the code