5种作为Web开发人员应避免的CSS做法

英文 | https://betterprogramming.pub/5-css-practices-to-avoid-as-a-web-developer-1b7553c05131

翻译 | 杨小二

有人认为CSS很难学，知识点多，也有人觉得它很容易，这使很多人很容易轻视它。

在细想了之后，我分享了5个开发者不友好的习惯，同时，与你分享如何避免这些不好的做法。希望，这个内容可以帮助到你。​

1、设置边距或填充，然后将其重置

我经常看到人们为所有元素设置边距或填充，然后将其重置为第一个或最后一个元素。我不知道为什么您只能通过一条规则就使用两条规则。一次为所有必需的元素设置边距和内边距要容易得多。

对于更简单，更简洁的CSS，请使用以下选项之一：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、添加显示位置为：绝对或位置为固定的元素的块

你是否知道不需要为display: block添加带有position: absolute或position: fixed的元素，因为默认情况下会添加？

另外，如果你使用inline-*值，它们将按以下方式更改：inline或inline-block将更改为block，inline-flex-> flex，inline-grid->grid和inline-table-> table。​

因此，只需编写position：absolute或position：fixed并仅在需要flex或grid值时添加显示。

不要这样做：

.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、使用转换：将（-50％，-50％）转换为居中

有一个流行的问题曾经引起很多麻烦。这一直持续到2015年，其所有解决方案都带来了某种困难。我说的是沿两个轴将任意高度的元素居中。

特别地，一种解决方案是结合使用绝对定位和transform属性。此技术在基于Chromium的浏览器中引起了模糊的文本问题。

但是在引入flexbox之后，我认为该技术已不再适用。问题是它不能解决文本模糊的问题。而且，它使您可以使用五个属性。因此，我想分享一个技巧，可以将代码减少为两个属性。

我们可以margin: auto在flex容器内使用，浏览器将元素居中。只有两个属性，仅此而已。

不要这样做：

3、使用转换：将（-50％，-50％）转换为居中

有一个流行的问题曾经引起很多麻烦。这一直持续到2015年，其所有解决方案都带来了某种困难。我说的是沿两个轴将任意高度的元素居中。

特别地，一种解决方案是结合使用绝对定位和变换属性。此技术在基于Chromium的浏览器中引起了模糊的文本问题。

但是在引入flexbox之后，我认为该技术已不再适用。问题是它不能解决文本模糊的问题。而且，它使你可以使用五个属性。因此，我想分享一个技巧，可以将代码减少为两个属性。

我们可以使用margin：在flex容器内自动放置，浏览器将元素居中。只有两个属性，仅此而已。

不要这样做：

.parent {
  position: relative;
}


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

你可以使用：

.parent {
  display: flex;
}


.child {
  margin: auto;
}

4、使用width：100％用于块元素​

我们经常使用flexbox创建一个多列网格，该网格逐渐转换为单列。

为了将网格转换为一列，开发人员使用width: 100%。我不明白他们为什么这么做。网格元素是块元素，默认情况下可以执行此操作，而无需使用其他属性。

因此，我们不需要使用width：100％，而是应该编写媒体查询，以便flexbox仅用于创建多列网格。

不要这样做：

<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项目的块

使用flexbox时，请务必记住，创建Flex容器（添加display: flex）时，所有子项（flex项）都会被阻塞。

这意味着元素被设置为显示，并且只能具有块值。因此，如果你设置了inline或inline-block，它将更改为block，inline-flex-> flex，inline-grid-> grid和inline-table-> table。

因此，请勿添加display: block到flex项目。浏览器将为你完成此操作。

不要这样做：

.parent {
  display: flex;
}


.child {
  display: block;
}

你可以使用：

.parent {
  display: flex;
}

结论

希望我向你介绍的这5种如何避免简单错误的方法对你有用，并且你也愿意接受我的建议。

谢谢你的阅读！编程愉快！