8个用于编写可维护，简化的前端代码的CSS策略

前言

代码质量不仅适用于后端的Java或C语言，它也适用于CSS。继续阅读，了解如何编写出色的CSS！

编写基本的CSS和HTML是我们作为Web前端开发人员学习的第一件事情之一。然而，我遇到过很多的应用都没有人花时间真正考虑前端开发的长久性和可维护性。

我认为这主要是因为许多开发人员对CSS / HTML和JavaScript的长久维护缺乏深刻的理解。但是对于团队来说，编写可维护的前端代码是非常重要的。

这篇文章的目的不在于规则手册，而在于您正在编写CSS时，更多的是要考虑事物的指南。我鼓励你找到你自己的编写css的流程，这篇文字的目的是让你的CSS一致，简单，易于使用。

这里有8个秘诀保持您的CSS组织和长期容易维护。

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

例如：编写display：block的时候，很多元素默认都有这种风格。

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

这样做的目的有两个：

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

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

而常见的问题是没有清理干净的CSS，为了简洁起见可以将它完全删除。

2.可以把你的css写成可重用的组件

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

编写可重用的css类可以解决一些事情:

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

这使得你编写CSS会很快。首先，大多数的样式被定义为你所知道的组件和类，则不必花费大量时间刷新和重新创建网页中已存在的样式。

3.在你的CSS中定义utilities来编写你的CSS

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

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

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

例如，使用.hide，而不是每次只需要在页面上写出一个元素就写出一个新的类，你可以在你的元素上加上.hide类，它会使元素显示display: none; 。

我们开发一个新的网站，一般都抽取旧网站的公共文件，因为这些文件可以减少为每个元素写出特定样式的需求。

通过一个很好的例子就是我们如何使用margin和padding盒子模型。下面是我们的盒子模型的一个简单的例子：

通过结合使用这些通用样式，我们可以保持与盒子间距的px一致，并且可以快速标记页面，而不必编写非常多的CSS。

通用样式背后的想法是，你认为你可能不止一次地使用它们。如果它是一次性风格，或者如果您认为风格的组合会经常使用，那么它可能会更好地作为自己的CSS类。

4.避免嵌套，直到你绝对需要它

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

所以你试图像这样写你的风格：

在编写的过程中，你意识到你需要列表元素中的一个链接实际上是黑色的。所以你试图写一个css类的将链接的颜色变成黑色：

这个.link--black将被CSS的特殊性所覆盖，并且无法覆盖.user-form li风格。

这可能是您的意图，但是现在要确保你的列表元素中的所有锚点标记是红色的，因为你不知道未来可能因设计而改变。

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

所以，在这种情况下，我会100％确定需要一个额外的css类来处理红色链接。这是在实践中会出现的例子：

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

我会在这里作出这样的假设：这个红色的链接会在某一天在网站的其他地方被使用。我不想将它嵌入到用户表单中，因为那样我就不得不在未来写出另外一种风格来解释需要红色链接的情况。

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

5.利用BEM防止嵌套

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

使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时，如果修改网页太麻烦或者太复杂。

这个例子看起来像这样：

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

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

在一个类上重写一个!important的定义是一种使你的代码被覆盖的痛苦的方法，特别是当你试图使用媒体查询时。

这是一个移动端的痛苦。例如，如果你先在手机屏幕显示某些内容，你必须使用另一个!important的移动设备类来重写.hide类以显示它。

我从来没有找到一个有效的借口来使用!important的，而不是在别人的错误的地方用!important来定义。

7.有时间和条件重新开始，但仔细考虑你的选择

重新发明轮子的例子可能是在客户端项目中创建自己的网格CSS框架。

根据我的经验，除非你想知道它是如何工作的，否则自己写这些东西并没有多大的好处。有很多边缘情况下建立自己的css样式，而不使用别人的时候，通过这样做你会获得一个很好的学习经验，但是会花费你大量的时间。

好的，但JavaScript插件呢？

在谈论JavaScript或jQuery插件时，我会说，对于那些与您使用的任何组件都有很好集成选项的真正常见组件来说，情况也是如此。

这里的边缘案例可以使用一些带有封装组件逻辑（React，Ember，Angular等）的JavaScript框架的插件。如果你要实现的效果比较简单，有时可能会这些插件放到这些组件中更麻烦。

例如，如果我使用的是依赖于jQuery的项目，但是会在React中构建我自己的模块，那么我将使用基础模块或引导模块（仅仅是因为编写组件以便通过引入jQuery插入到React组件中）。

8.关心你的前端代码！

最后，我可以向你建议的最重要的事情是，你关心你为前端编写的代码，掌握它的所有权，并且始终不断地改进它（和你自己！）。

我认为这是具有长期可维护性的应用程序与难以处理的应用程序之间的最大因素之一。