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

我认为这主要是由于许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解。

对我和我们的团队来说，重要的是编写可维护的前端代码。尽管我们有几个与我们一起工作了多年的客户，但要记住永远不会是唯一一个在应用程序上工作的人。仅仅因为你的一次性元素和配置对你有意义，并不意味着它们对下一个可能继承应用程序的人有意义。

为了防止这篇文章太长，我今天将主要讨论CSS组织。JavaScript的组织是一个完全不同的的问题。

这篇文章的目的不在于规则手册，而在于您正在编写CSS时需要考虑的更多内容。我鼓励你找到你自己的流程，但是这里的目标是让你的CSS一致，简单，易于使用。

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

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

例如：注意写display:block;任何东西，因为很多元素默认都有这种风格。

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

这里的目标是双重的：

减少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-0 { padding：0 ; }

.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-form li a { color: red; }

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

.link--black { color: black; }

这个.link--black链接将被CSS的特殊性所覆盖，将无法压倒.my-form li a风格。

这可能是您的意图，现在要确保您的列表元素中的所有锚点标记是红色的，但是您不知道未来的元素和可能做出哪些设计更改。

你可能会读到这个问题，“ 好的科琳，但是你怎么解决上面的问题呢？ ”

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

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

a {

color: blue;

&:hover {

color: black;

}

}

.link--red { color: red; }

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

我会在这里作出这样的假设：这个红色的链接将在某一天在应用程序的其他地方被使用。我不想将它嵌入，.user-form因为那样我就不得不在未来写出另外一种风格来解释另外一个需要红色链接的时候。

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

5.利用BEM防止嵌套

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

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

这个例子看起来像这样：

// HTML snippet

<div class=”profile”>

<img src=”person.jpg” class=”profile__photo”/>

</div>

// BEM CSS

.profile {

background-color: white;

border: 1px solid #ccc;

}

.profile__photo {

border-radius: 50%;

border: 1px solid #000;

}

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

6.只有使用！重要作为最后的手段

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

这是我与基金会的某个版本的一个令人头疼的问题，他们决定!important对他们的知名度进行打分。

这是一个移动的痛苦。例如，如果您希望将事情展示给手机屏幕，则必须.hide使用另一个!important移动类来覆盖该类，以显示该类。

我从来没有找到一个有效的借口，!important而不是写别人错位的重要定义。

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

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

根据我的经验，除非你想知道它是如何工作的，否则自己写这些东西并没有多大的好处。有很多边缘情况下建立自己的，为什么不使用别人的时候，它是免费的，工程已经很好？

也就是说，自己创建一个可能是一个很好的学习经验 - 但这很可能不属于生产应用程序。

好的，但JavaScript插件呢？

在谈论JavaScript或jQuery插件时，我会说，对于那些与您使用的任何组件都有很好集成选项的真正常见组件来说，情况也是如此。这样的一些例子将是一个JavaScript转盘之间交换照片，或日期选择器。

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

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

8.关心你的前端代码！

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

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

通过在编写CSS时遵循这八个技巧，您将为自己和继承您的代码的不可避免的未来开发人员节省时间。