5个css编码坏习惯

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

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

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

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

但其实还可以通过选择器，例如nth-child / nth-of-type 选择器，以及 :not() 伪类或者 next-sibling 协调器（又称为+）来实现目标。下面我们将用具体的代码示例来说明。

不要这样写： .item{margin-right:1rem} .item:last-child{margin-right:0}
可以这样写：


        .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个属性的集合。但是今天我分享的方法可以将代码减少到两个属性。
不知道大家有没有用过自动边距？据说这是flexbox的主要优势之一。原因就在于它是可以预测的。我们不需要知道元素的宽度和高度即可实现居中。
我们只需要写margin: auto即可，浏览器就会在可用空间中居中显示。如果没有可用空间，那么浏览器将准确显示。

不要这样写：


        .parent{position:relative;} 

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

要这样写：


        .parent:{display:flex;} 

        .child{margin:auto;}

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

很多人会选择的一种做法是使用flexbox创建一个可以转换为单列的多列网格。我认为对多列网格使用flexbox是ok的，但是对于创建单列网格则并非如此。
在这种情况下，网格的项通过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-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-*值以使得代码简洁清晰。