CSS 代码的 6 个策略

保持CSS有条理和易于长期维护的秘诀

1.不要写不需要的样式定义

例如：编写时要注意，因为很多元素默认有这个样式。

另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。

目标是双重的：

减少CSS文件的长度，以便浏览。

明确你的CSS类需要做什么，而不是定义一堆已经产生的垃圾。

这里有一个常见问题是CSS没有清理干净，此时，为了简洁起见，可以完全删除。

2.将CSS看作可重用组件

不要将CSS元素视为每个单独页面上的特定表单或元素，如果你可以定义可重用的CSS实用程序和组件以供自己使用，则可以减少很多复杂性。

编写旨在重用的类的作用：

确保你的设计在不同的页面之间保持一致。当你在很多页面上共享CSS类时，你知道当你改变这个类时，它会在每一个出现的页面发生改变。

这使得编写CSS真的很快。首先，如果大多数样式被定义为你所知道的实用程序和类，那么你就不必花费大量时间刷新和重新创建应用程序中已存在的样式。

3.在CSS中定义实用工具来干你的CSS

我们将’utilities’定义为一个CSS类，实际上它只用来做一件特定的事情，而不是封装整个元素。

你会看到这个策略经常用于流行的CSS框架，如Bootstrap和Foundation。

在这些流行的框架中你所看到的一些例子是：

.hide{display: none; }.text-center{text-align: center; }

例如，使用.hide，就不必每次想要在页面上隐藏元素时就得编写一个新的类——你只需要在你的元素上加上.hide类，它会使元素display: none; 。

我们写了一些实用程序文件，这些文件在应用程序之间共享，使用一些常用的实用程序可以减少为每个元素编写特定样式的需求。

一个很好的例子是我们如何使用margin和padding实用程序。下面是padding实用程序的一个简单例子：

.padding-0{padding:; }.padding-xxs{padding:5px; }.padding-xs{padding:10px; }.padding-sm{padding:20px; }.padding-md{padding:30px; }.padding-lg{padding:40px; }.padding-xl{padding:50px; }.padding-xxl{padding:60px; }

通过结合使用这些工具，我们可以与我们间距的像素数保持一致，并且可以快速标记页面，而不必编写非常多的CSS。

实用程序背后的理念是，你认为你可能会不止一次地使用它们。如果它是一次性样式，或者如果你认为组合样式会经常使用，那么可能它作为CSS类将可以更好地工作。

4.除非绝对需要，否则避免嵌套

假设有一些复选框的表单。在这个特定的情况下，你需要复选框内联（并排）。

所以你试图像这样写样式：

.user-formlia{color: red; }

然后在这过程中，你意识到你需要列表元素中的一个链接实际上是黑色的。所以你试图为黑色的链接编写一个工具类：

.link--black{color: black; }

此处.link–black链接将被CSS特殊性所覆盖，并且将无法压倒.my-form li a样式。

现在你可能想要确保列表元素中的所有锚标记是红色的，但是你不知道未来的元素会怎么样以及可能会对设计做出什么样的更改。

你可能会问，“好的亲，那么你怎么解决上面的问题呢？”

通过上面的例子，你应该明白锚标签的颜色应该是一个远离默认链接颜色的变体。

所以，在这种情况下，我会100％确定一个额外的工具类来处理红色链接。下面是实践中可能的处理例子：

a {color:blue; &:hover{color:black; }}.link--red {color:red; }

然后将其添加到HTML中的每个li元素。

我在这里作出的假设是：某一天，此红色的链接将在应用程序的其他地方被使用。我不想把它嵌入到用户表单中，因为那样我就不得不在未来编写另外一个样式来说明需要红色链接的情况。

另外，因为我将自己的悬停定义在自己的锚点上，所以红色链接将会变成黑色悬停，而不必定义任何其他样式。

5.利用BEM防止嵌套

能够真正防止过度嵌套的一个策略是名为BEM（Block Element Modifier）的命名策略。

使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时，如果使用实用程序会太麻烦和复杂的话。

这个例子看起来像这样：

// HTML snippet

// BEM CSS.profile { background-color: white; border:1px solid#ccc;}.profile__photo { border-radius:50%; border:1px solid#000;}

你可以从这个例子中看到，我可以从我的样式表中看到.profile__photo嵌套在.profile中，然而实际上并不需要嵌套这个类。这真的是BEM最棒的地方，也是为什么我建议使用它的原因。

6.只使用!inportant作为最后的手段

在一个类上放上!important定义会使得覆盖代码变成一件令人头痛的事情，特别是当你试图处理媒体查询时。

这是我在处理Foundation的某个版本遇到的一个令人头痛的问题，因为他们决定对可见类打上!important。

这对于移动设备也是一个痛苦的根源。例如，如果你希望手机屏幕显示某些内容，则必须使用另一个!important类来重写.hide类以显示它。

我一直找不到使用!important的有效借口，除了在别人错误使用!important定义的情况下。

完