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

翻译 | 杨小二

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种如何避免简单错误的方法对你有用，并且你也愿意接受我的建议。

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

来个【分享、点赞、在看】三连支持一下吧