这5种写CSS的习惯应尽量避免

╰半夏微凉° 2023-01-20 11:51 24阅读 0赞

![50807525e5c52444470c7cc5daabad50.png][]

英文 | 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仅用于创建多列网格。

不要这样做：

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

你可以使用：

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

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

**如果觉得这篇文章还不错**

**点击下面卡片关注我**

**来个【分享、点赞、在看】三连支持一下吧![b265732f0fc50a67542d915c78db36b9.png][]**

[50807525e5c52444470c7cc5daabad50.png]: /images/20221021/fdfc85c5658244578f3a71176a077b45.png
[b265732f0fc50a67542d915c78db36b9.png]: /images/20221021/91f7a62e588c435abb974e63d806cea0.png