【CSS】改掉5 个 CSS 编码坏习惯

今天我要分享的是我总结的一些CSS编程坏习惯。希望你在编写CSS代码时，可以扬长避短，一切顺利。

1. 先给所有元素定义相同的属性，然后重置其中之一

关于这个如何设置一些属性然后再重新设置的问题，让我觉得很纳闷，因为我本身比较倾向于使用简短的CSS。

在元素之间设置边距时很容易出现问题。这个时候大多数人会怎么做呢？首先，他们设置所有元素，然后把第一个或最后一个元素重新设置。不要这样做：

.item {
  margin-right: 1rem;
}
// 最后一个元素重新设置
.item:last-child {
  margin-right: 0;
}

但其实还可以通过选择器，例如nth-child/nth-of-type选择器，以及:not()伪类或者next-sibling协调器（又称为+）来实现目标。可以这样做：

.item:not(:last-child) {
  margin-right: 1rem;
}
/*或者*/
.item:nth-child(n+2) {
  margin-left: 1rem;
}
/*或者*/
.item + .item {
  margin-left: 1rem;
}

2. 给绝对定位或固定定位的元素应用display:block样式

我经常遇到的一个常见错误是添加display:block到带有position: absolute或position: fixed的元素。之所以不应该怎样做，是因为浏览器会自动给带有position: absolute或position: fixed的元素设置display:block样式，并不需要你手动添加。

不要这样做：

.button::before {
  content: "";
  display: block;
  position: absolute;
}
/*or*/
.button::before {
  content: "";
  display: block;
  position: fixed;
}

可以这样做：

.button::before {
  content: "";
  position: absolute;
}
/*or*/
.button::before {
  content: "";
  position: fixed;
}

3. 通过transform: translate(-50%, -50%)方法居中元素

长期以来，一直盛行使用transform属性居中元素的方法：transform: translate(-50%, -50%)。
在这种方法中，我们必须使用5个属性的集合。

.parent {
  position: relative;
}

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

但是今天我分享的方法可以将代码减少到两个属性。

不知道大家有没有用过自动边距？据说这是flexbox的主要优势之一。原因就在于它是可以预测的。我们不需要知道元素的宽度和高度即可实现居中。
我们只需要写margin: auto即可，浏览器就会在可用空间中居中显示。如果没有可用空间，那么浏览器将准确显示：

.parent {
  display: flex;
}

.child {
  margin: auto;
}

4. 给块级元素定义width:100％

很多人会选择的一种做法是使用flexbox创建一个可以转换为单列的多列网格。我认为对多列网格使用flexbox是ok的，但是对于创建单列网格则并非如此。

在这种情况下，网格的项通过width:100%在父级宽度上延展开来。但是我们忘记了网格的项在默认情况下是以这种方式延伸的块级元素。

因此，我们不需要使用width:100%。只要在需要创建多列网格时直接使用flexbox即可。

不要这样做：

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">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">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
@media (min-width: 1024px) {

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

  .child {
    width: 25%;
  }
}

5. 给flex-items定义display:block

flexbox还有一个重要的功能。当你对元素定义display:flex时，那么其所有的子元素（flex-items）都会被定义为block。

这是什么意思？所有display属性为inline，inline-block，inline-flex，inline-grid或inline-table的flex元素都将被更改。inline和inline-block将更改为block，inline-flex-> flex，inline-grid-> grid和inline-table-> table。

因此，避免使用inline-*值以使得代码简洁清晰。

不要这样做：

.parent {
  display: flex;
}

.child {
  display: block;
}

可以这样做：

.parent {
  display: flex;
}