[译]5个 CSS 避坑实践文章来自 Medium 的一篇文章哦，原文地址： https://betterprogram

文章来自 Medium 的一篇文章哦，原文地址： betterprogramming.pub/5-css-pract…

1. 设置 margin 和 padding，然后重置他们

我总是看到一些人给所有元素设置 margin 或者 padding，然后再重置第一或者最后一个元素。其实可以用 1 条规则而不是 2 条规则去实现。可以直接对选中的元素一次完成设置。
使用 nth-child/nth-of-type 选择器和:not() 伪类选择器或者邻接选择器完成。

不要这么做：

.item {
  margin-right: 1.6rem;
}

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

可以

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

或者：

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

或者：

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

2. 没必要为 position: absolute 或 fixed 设置 display:block

你知道吗没必要为 position: absolute 或 fixed 的元素设置 display:block 因为 position: absolute 或 fixed 的元素本身就是 display:block

当然，当你为 inline-*的元素设置 display:block 的时候，他们也会发生相应的变化：inline 或者 inline-block 会变成 block, inline-flex -> flex, inline-grid -> grid, 以及inline-table -> table.

不要这么做

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

或者

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

可以

.button::before {
  content: "";
  position: absolute;
}

或者

.button::before {
  content: "";
  position: fixed;
}

3. 使用 transform: translate (-50%, -50%) 居中

有一个经常引起很多麻烦的问题。这种情况一直持续到2015年，所有的解决方案都带来了某种困难。我说的是让任意高的元素在两个轴上居中。

特别是，一种解决方案是结合使用绝对定位和 transform 属性。这种技术在基于 chrome 的浏览器中会导致文本模糊问题。

但是在引入 flexbox 之后，在我看来，这种技术就不再重要了。问题是它不能解决文本模糊的问题。更重要的是，它让你使用五个属性。因此，我想分享一个可以将代码减少为两个属性的技巧。

我们可以在flexbox 容器子元素上使用margin: auto，浏览器将元素居中。只需要两个属性就可完成。

不要这么做：

.parent {
  position: relative;
}

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

可以这么写：

.parent {
  display: flex;
}

.child {
  margin: auto;
}

4. 为 block 的元素设置宽度

我们经常使用 display: flex 创建一个多列网格，并逐渐转换为单列。将多列转为单列布局的时候，一些开发者使用 width: 100% 来实现。我不明白他们为什么这么做，因为多列布局的元素本身就是 block，并不需要额外的样式设置。
因此，我们不需要使用width: 100%，而是应该编写媒体查询，以便 display: flex 仅用于创建多列网格。

不要这么做：

<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>

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

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

可以这么写：

<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>

@media (min-width: 1024px) {
  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    width: 25%;
  }
}

5. 为 flex 元素项设置 display: block

当使用 display: flex 属性的时候，知道这一点很重要：父元素（display: flex ）下面的所有子元素都会自动被设置为 display: block。

这意味着子元素的display 只会被设置为了 block。相应地，如果您设置inline或inline-block，它将更改为block、inline-flex -> flex、inline-grid -> grid和inline-table -> table。

因此，不用向 display: flex 子元素添加 display: block。浏览器会帮你完成。

不要这么做：

.parent {
  display: flex;
}

.child {
  display: block;
}

可以这么做：

.parent {
  display: flex;
}