开发人员应避免的 CSS 实践

设置边距或填充，然后重置它们

我们经常看到开发者编写 CSS 边距/填充样式，然后手动重置它们。例如：

.item{
     margin-right: 1.6rem;
}

.item:last-child{
     margin-right: 0;
}

开发人员可以简单地使用如下方法，而不是使用这种极其不健康的做法：

.item:not(:last-child) {
     margin-right: 1.6rem;
}

设置 Display:Block 用于弹性项目

使用 Flexbox 时，重要的是要记住，当您创建一个 flex 容器（添加 Display:Flex）时，所有子项（Flex Items）都会变成 BLOCKiFIED，
因此，不要使用如下代码：

.parent {
     display: flex;
}

.child {
     display: block;
}

开发人员可以简单地使用

.parent {
     display: flex;
}

对块元素使用宽度：100%

由于我们开发者已经为元素定义了 Display 属性，因此无需为其子元素额外添加 width: 100%。例如，请看一个我们需要避免的做法的示例：

<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 class="child">Item 5</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 class="child">Item 5</div>
</div>

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

     .child {
          width: 25%;
     }
}