CSS可维护、精简化的八个实用方法

1.不要写不需要的样式

有些地方会有自己的默认样式，所以就没必要去重复写这些默认的东西，除非你确定要改它。另外，文字哪些比较特殊的属性会有继承的特性，多注意一下这些，需要改才去改。

2. 考虑把 CSS 当作可复用组件

如果你可以定义可复用的 CSS 工具和组件来使用而不是把 CSS 元素看作每个单页特有的形式和元素，就会大大减少代码的复杂性。

写可复用的类来做这样一些事情：

• 确定你的设计在多个不同的页面之间保持一致，你应该知道如果你改变了一个类的样式，变化会表现在每一个页面上。

• 这样写 CSS 确实很快。多数时候，如果你把部分样式定义为一个工具或者类，你就不需要花大量的时间来更新和重建应用中已经存在于其它地方的样式。

3. 在 CSS 中定义工具以使你的 CSS 更实用

我们将 '工具' 定义为这样一种 CSS 类，它是为某种特定的目标而生，而不是为了表示一整个元素。

在流程的 CSS 框架，比如 Bootstrap 和 Foundation 中，你会经常看到对这一策略的应用。

在定义工具的时候，你应该考虑到会多次使用它们。如果是一次性的样式，或者只是想组合一些常用的样式，那么最好是定义成专门的 CSS 类。

4. 避免嵌套，除非你真的需要它

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

5. 利用 BEM 来防止过多的嵌套

BEM (Block Element Modifier) 策略可以地真正防止过度嵌套。

5. 利用 BEM 来防止过多的嵌套

BEM (Block Element Modifier) 策略可以地真正防止过度嵌套。

6. 只在不得已时使用 !important

在一个类上定义 !important 是一种使代码被有痛覆盖的方法，特别是当你试图处理 media 查询时。

而且这对于移动端来说很麻烦。比如说，如果你希望在手机屏幕显示某些内容，则必须使用另一个 !important 类来覆盖 .hide 类以在移动设备上显示它。

我没有找到一个合理的借口来使用 !important ，除非你是在重写别人之前放错位置的 !important 类。

7. 有时候需要重新发明轮子，但请认真考量其他可行选项

在客户端项目中构建自己的网格 CSS 框架，这就是一个重复造轮子的例子。

据我的经验，除非你想知道它是如何工作的，否则自己写这些东西并没有多大的好处。出现过很多自己构建的边缘案例，而且也没有理由不去用别人已经做得很好且免费的东西。

也就是说，自己造一个轮子可能是一个很好的学习经验 - 但这在应用生产中或许并不适用。

好吧，但 JavaScript 插件呢？

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

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

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

7. 有时候需要重新发明轮子，但请认真考量其他可行选项

在客户端项目中构建自己的网格 CSS 框架，这就是一个重复造轮子的例子。

据我的经验，除非你想知道它是如何工作的，否则自己写这些东西并没有多大的好处。出现过很多自己构建的边缘案例，而且也没有理由不去用别人已经做得很好且免费的东西。

也就是说，自己造一个轮子可能是一个很好的学习经验 - 但这在应用生产中或许并不适用。

好吧，但 JavaScript 插件呢？

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

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

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

8. 在乎你的前端代码

最后，我建议你做的最重要的事情是在乎你写的前端代码，掌握代码，并且始终不断地改进代码（同时也要不断提升自己！）。

在一个需要长期维护的应用程序和一个很难上手且总是出问题的项目之间，我相信不断改进代码是最大重要因素之一。

写 CSS 时使用这八个技巧，你不仅可以节省你自己的时间，还能节省未来接手你代码的开发者的时间。