学习编程技术，关注这个公号就够了css
协做翻译前端
原文：8 CSS Strategies for Writing Maintainable, Streamlined Front-End Code程序员
连接：https://dzone.com/articles/8-css-strategies-for-writing-maintainable-streamli-1web
译者：rever4433, 边城, 无若, 王练编程
写基本的 CSS 和 HTML 是入门 Web 开发首先须要学习的事情之一。然而我遇到的不少程序显然没有真正的花时间去考虑前端开发的长期性和可维护性。安全
我认为这主要是由于不少开发者在组织他们的 CSS/HTML 和 JavaScript 时没有深刻地理解相关的策略。微信
对于我和咱们团队来讲，最重要的事情写可维护的前端代码。虽然咱们有好几个客户一直合做多年，但必定要记住，你永远不会是在某个应用程序的惟一开发者。你的一次性代码和配置仅仅对你有意义，这并不意味着它们对开发这个应用的下一任开发者有意义。框架
为了避免让本文太长，我今天会主要讲述与组织 CSS 相关的内容。组织 JavaScript 有彻底不一样的作法。ide
本文的目标是至少成为一个规则，最好能成为你编写 CSS 的指南。我会鼓励你找到本身的处理方式，但这里的目标是使 CSS 一致、简单、易于使用。工具
这里有 8 个技巧用来组织 CSS，使之便于长期维护。
1.不要写不须要的样式
例如：在任何地方写 display:block 时都须要注意。由于许多元素默认都有这种样式。
再好比，定义继承了你定义过字体大小的元素的字体大小。
这里的目标是双重的：
减小 CSS 文件的长度，这样更容易在 CSS 文件中定位代码位置。
明确 CSS 类实际须要作什么，而不是定义一堆已有的垃圾样式。
一个常见问题是有许多再也不使用的 CSS 样式没有清理掉，为了简洁起见，这些 CSS 样式能够彻底删除。
2. 考虑把 CSS 看成可复用组件
若是你能够定义可复用的 CSS 工具和组件来使用而不是把 CSS 元素看做每一个单页特有的形式和元素，就会大大减小代码的复杂性。
写可复用的类来作这样一些事情：
肯定你的设计在多个不一样的页面之间保持一致，你应该知道若是你改变了一个类的样式，变化会表如今每个页面上。
这样写 CSS 确实很快。多数时候，若是你把部分样式定义为一个工具或者类，你就不须要花大量的时间来更新和重建应用中已经存在于其它地方的样式。
3. 在 CSS 中定义工具以使你的 CSS 更实用
咱们将 '工具' 定义为这样一种 CSS 类，它是为某种特定的目标而生，而不是为了表示一整个元素。
在流程的 CSS 框架，好比 Bootstrap 和 Foundation 中，你会常常看到对这一策略的应用。
在流程框架中能够看到这样一些例子：
好比，使用 .hide 以后，就不须要每次都写一个类来隐藏页面上的元素，你能够直接在元素上使用 .hide 类，它会赋于元素 display: none; 样式。
咱们已经建立了本身的工具文件并在各个应用之间共用，咱们使用一些公共工具来减小为每一个元素写特定样式的需求。
关于这点，有一个不错的例子，使用 margin 和 padding 工具。这里咱们有一个 padding 工具的示例（咱们也定义了 margin 相关的工具，以及只有 padding-left 和 padding-right 的工具等）：
经过组合这些工具，咱们能够保持空白像素一致，同时快速为页面作上标记，还不用写大量的 CSS。
在定义工具的时候，你应该考虑到会屡次使用它们。若是是一次性的样式，或者只是想组合一些经常使用的样式，那么最好是定义成专门的 CSS 类。
4. 避免嵌套，除非你真的须要它
有一些复选框的表单。 在这个特定的状况下，你须要你的复选框内联（并排）。
你要是试图像这样写你的风格：
你意识到你须要列表元素中的一个连接其实是黑色的。 因此你试图写一个黑色连接的工具类：
这个.link - 黑色连接将被CSS的特殊性所覆盖，而且将没法压倒.my-form li风格。
这多是您的意图，如今要确保您的列表元素中的全部锚点标记是红色的，可是你不知道将来的元素和可能作出的设计更改。
你可能会读到这个问题，“好的 Corinne，可是你怎么解决上面的问题呢？”
经过上面的例子，你应该明白锚标签的颜色应该是一个远离默认连接颜色的变体。
因此，在这种状况下，我会100％肯定一个额外的工具类来处理红色连接。因此这是一个在实践中看起来像什么的例子：
而后将其添加到HTML中的每一个li元素。
我会在这里做出这样的假设：这个红色的连接将在某一天在应用程序的其余地方被使用。 我不想将它嵌入到用户表单中，由于那样我就不得不在将来写出另一种风格来解释须要红色连接的状况。
另外，由于我将本身的悬停定义在本身的锚点上，因此红色连接将会变成黑色悬停，而没必要定义任何其余样式。
5. 利用 BEM 来防止过多的嵌套
BEM (Block Element Modifier) 策略能够地真正防止过分嵌套。
使用 BEM 的一个例子是当你使用一个具备不少具体样式的组件时，它会变得很复杂很混乱而且没法使用 utilitiy 。
举个上述那样的例子：
从这个例子中你能够看出，我定义的样式表中 .profile__photo 是与 .profile 嵌套的，可是没有使用嵌套的类。这就是 BEM 最厉害的地方，这也是为何我推荐使用 BEM 。
6. 只在不得已时使用 !important
在一个类上定义 !important 是一种使代码被有痛覆盖的方法，特别是当你试图处理 media 查询时。
并且这对于移动端来讲很麻烦。好比说，若是你但愿在手机屏幕显示某些内容，则必须使用另外一个 !important 类来覆盖 .hide 类以在移动设备上显示它。
我没有找到一个合理的借口来使用 !important ，除非你是在重写别人以前放错位置的 !important 类。
7. 有时候须要从新发明轮子，但请认真考量其余可行选项
在客户端项目中构建本身的网格 CSS 框架，这就是一个重复造轮子的例子。
据个人经验，除非你想知道它是如何工做的，不然本身写这些东西并无多大的好处。出现过不少本身构建的边缘案例，并且也没有理由不去用别人已经作得很好且免费的东西。
也就是说，本身造一个轮子多是一个很好的学习经验 - 但这在应用生产中或许并不适用。
好吧，但 JavaScript 插件呢？
在谈论 JavaScript 或 jQuery 插件时，我会说，对于那些与你使用的任何组件都很好集成的常见组件来讲，状况也是如此。 这里有一些例子，例如： JavaScript 转盘之间交换照片，或日期选择器。
这里的边缘案例可使用一些带有封装组件逻辑（React，Ember，Angular等）的 JavaScript 框架插件。 若是你想要作的事情相对简单，有时可能比将这些插件放到这些组件中更麻烦。
例如，若是我使用的是依赖于 jQuery 的项目，可是会在 React 中构建我本身的模块，那么我将使用基础模块或引导模块（仅仅是由于编写组件以便经过引入 jQuery 插入到 React 组件中）。
8. 在意你的前端代码
最后，我建议你作的最重要的事情是在意你写的前端代码，掌握代码，而且始终不断地改进代码（同时也要不断提高本身！）。
在一个须要长期维护的应用程序和一个很难上手且老是出问题的项目之间，我相信不断改进代码是最大重要因素之一。
写 CSS 时使用这八个技巧，你不只能够节省你本身的时间，还能节省将来接手你代码的开发者的时间。
你采起哪个建议来精简你的 CSS 代码？请在下方评论，让我知道你的选择。
推荐阅读：
关注『编程互联』公众号，让咱们一块儿成长
长按关注公众号
本文分享自微信公众号 - 程序员开源社区（jkjishuzhan）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。