CSS进阶：提升你前端水平的 4 个技巧

译者注：随着 Node.js 、react-native 等技术的不断出现，和互联网行业的创业的层出不穷，了解些前端知识，成为全栈攻城师，快速的产出原型，展现你的创意，对程序员，尤为是在创业的程序员来讲，愈来愈重要，下面咱们就跟随著名国外开发者网站上的热推文章《Leveling up in CSS》，从提高你的CSS技巧开始。

 

CSS 在刚开始学习的时候看起来很是简单。毕竟，它仅仅就是些样式而已，事实上是这样吗？

可是，随着你的不断了解。很快，你会发现 CSS 没你想象的那么简单，它复杂且有深度。

作好这四件事情，能让你在大规模使用 CSS 的时候保证代码的健壮性：使用适当的语义，模块化，采用统一的命名规范，遵循单一功能原则。

使用适当的语义

在 HTML 和 CSS 编程中有语义标注的概念。语义是指单词的含义和他们间的关系。在 HTML 编程中，意味着你须要使用一个合适的标签名字来标记。下面是一个经典的例子。

<!-- bad --> 
 <div class = ”footer” </div>
 <!-- good -->
 <footer></footer>

富有语义的 HTML 是很是简单明确的。另外一方面，富有语义的 CSS 则是更抽象和主观的。编写富有语义的 CSS 意味着在选择类型的时候，类名要传达出结构和功能信息。类名要很容易被理解。确保它们不要太具体、太特殊。这样，你就能够复用它了。

 

为了阐述什么是一个良好的类名，请看这个简化了的 Medium 网站的 CSS 例子。

<div  class ="stream">
 <div  class="streamItem">
 <article  class="postArticle">
  <div  class = "postArticle-content">
<!-- content -->
 </div>
 </article>
 </div>
</div>

经过这些代码，你能够当即识别出它们的结构、功能和含义。父节点的类名是 stream ，内容是一个文章列表。它的子节点的类名是 streamItem ，内容是文章列表中的一篇具体的文章。这使咱们很容易的了解到父节点和子节点之间的关系。而且，这些类能够在每个有文章功能的页面中使用。

你能够像阅读一本书同样读 HTML 和 CSS。它会给你讲一个故事。经过故事你能够了解故事中的每个角色和他们之间的关系。语义丰富的 CSS 代码容易理解，更便于维护。

若果你想进一步了解语义相关的内容，看看 《怎么富有语义的为类命名》、《CSS 命名不简单》 和 《富有语义和容易识别（的代码命名）》，再看 《关于 HTML 命名和前端架构》。

模块化

在这个充满了组件库（以 React 为例）的时代，模块化就是王者。组件就是由已经解构了的接口建立的可组合的模块。下面是一个Product Hunt（一种发布好的创业项目的网站）前端页面。做为练习，让咱们将这个页面分解成一系列的组件。

 

每种颜色框表明一个组件，stream 节点下分为好多个 stream item 子节点。

<div class = "stream" >
 <div class = "streamItem" >
 <!-- product info -->
 </div>
 </div>

大多数组件均可以分解为更小的组件。

 

每个 stream item 组件都有一个缩略图和一个特点的产品信息。

<!-- STREAM COMPONENT -->
 <div class = "stream" >
 <div  class = "streamItem" >
 <!-- POST COMPONENT -->
 <div  class = "post" >
 <img  src = "thumbnail.png" class = "postThumbnail" />
 <div  class = "content" >
 <!-- product info -->
 </div>
 </div>
 </div>
 </div>

因为 stream 组件和它的子控件是彻底独立的，你能够很容易的调整或者更换 post 组件，而且这不会对 stream 组件产生任何影响。

使用组件的思想将会使你的代码解耦。解耦的代码越多，你的类之间的依赖就越低。这会让你的代码更容易修改，而且使你的代码更长时间的工做下去而不用修改它。

 

组件驱动设计

模块化你的 CSS 时，首先将你的设计分解成多个组件。你可使用纸和笔，也可使用相似 Illustrator 或者 Sketch 这类的软件。肯定你将要如何命名这些组件，同时理清各个组件之间的关系。

阅读更多关于 CSS 组件驱动的文章，详见《CSS 建构：可扩展和模块化处理》、《使用 Sass 编写模块化的 CSS》和《模块化你的前端代码——编写高可维护和条理清晰的代码》。

采用统一的命名规范

目前有几十个不一样版本的 CSS 命名规范。有些人对他们选择的命名规范极其笃定，认为他们的比别人的更好。事实上，不一样的人喜欢不一样的命名规范。我听到的最好的建议是：选择你以为最合适的命名规范。

下面简单列举一下经常使用的命名规范：

• Object oriented CSS OOCSS

• Block element modifier (BEM)

• Scalable and modular architecture for CSS (SMACSS)

• Atomic

我最喜欢的命名规范是 BEM。BEM 表明块(block)、元素（element）和修饰符（modifier）。Yandex，在俄罗斯的至关于谷歌的搜索引擎，为了解决他们 CSS 代码库中的缩放问题而提出了它（它指BEM）。

 

BEM 是一个极其简单——又极其严格——的命名规范。

.block  {}
 .block__element  {}
 .block--modifier  {}

块（Blocks）表明高级别的类。元素（Elements）是块的子模块。修饰符（modifiers）表明不一样的状态。

 

<div class = "search" >
 <input  type= "search__btn search__btn--active"  />
 </div>

在上面的示例中， search 是块（block），search button是它的元素（element）。若是你想要更改按钮的状态，咱们能够为按钮增长一个修饰符，例如 active 。

关于命名规范要记住的一件事是，不管你喜欢哪一种命名规范，你会常常继承或者工做在不一样标准的代码库上。请敞开心扉去学习新的标准，用不一样的思惟去思考 CSS 。

你能够在《深刻学习 BEM 语法》、《BEM 101》和《BEM 简介》上看到更多关于 BEM 的信息。想要了解不一样的命名规范，参见《OOCSS、ACSS、BEM、SMACSS：这些是什么？我该用哪一个？》。

遵循单一功能原则

单一功能原则规定每一个模块和类都应该有一个单一的功能，而且该功能应该由这个类彻底封装起来。

在 CSS 中，单一功能原则表明每一段代码、类和模块只作一件事。当咱们提交 CSS 文件时，这意味着每一个独立的组件（例如轮播效果和导航栏）都应该有本身的 CSS 文件。

/
 components
 |-  carousel
 |- |-  carousel .css
 |- |-  carousel.partial . html
 |- |-  carousel . js
 |-  nav
 |- |-  nav . css
 |- |- nav .partial . html
 |- |-  nav . js

另一个常见的组织文件的方式是按照功能将文件分组。举个栗子，如上面所示，全部和轮播效果组件有关的文件都被分类到了一块儿。采用这种方式可让你更容易的找到相关文件。

除了对组件的样式进行分离以外，最好利用单一功能原则对全局样式也进行分离。

/ base
 |-  application . css
 |-  typography . css
 |-  colors . css
 |- grid . css

在这个例子中，每一个相关的样式被分离到本身的样式文件中。这样，若是你想要修改样式中的颜色，那么你将会很容易的找到它。

不管你使用哪一种方式组织文件结构，尽可能在决定的时候参考单一功能原则。一旦有某个文件开始变的臃肿，那么考虑按照逻辑功能将它分红多个部分。

更多有关组织文件结构和 CSS 架构的文章，详见《Sass 审美 1：架构和组织样式文件》和《可扩展和可维护的 CSS 架构》。

当单一功能原则应用于你的每个 CSS 类选择器中时，这意味着每个类选择器都有着惟一的功能。换句话说，要根据不一样关注点将样式分离到不一样的类选择器中。下面是个经典的例子：

.splash {
background : #f2f2f2 ;
 color :#fffff ;
 margin : 20px ;
 padding: 30px;
 border-radius : 4px;
 position : absolute ; 
 top : 0 ;
 right: 0 ;
 bottom : 0 ;
 left: 0 ;
 }

在上面的例子中，咱们将关注点耦合了。splash 这个类不但包含了自己的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，咱们能够将这段代码分离为两个新的类。

.splash {
   position: absolute;
   top: 0;
  right: 0;
   bottom: 0;
  left: 0;
 }

如今咱们有 splash 和 splash content 两个类。咱们能够将 splash 做为一个通常的全屏类，它能够拥有任何子节点。全部子节点关注的属性，都在 splash content 中，与父节点的属性是彻底解耦的。

你能够经过阅读下列文章进一步了解单一功能原则在样式表和类中的应用。《单一功能原则在 CSS 中的应用》和《单一功能原则》。

简单赛过复杂

若是你问任何一个成功的前端开发工程师或者 CSS 架构师，他们会告诉你，他们历来没有对本身的代码彻底满意。写好 CSS 是一个不断迭代的过程。从简单开始，遵循基本的 CSS 规则和样式指南，而后不断迭代。

我很想知道你的 CSS 学习之路。你喜欢的命名规范是什么？你是怎样组织你的代码文件的？你能够随时经过留言或者在 Tweet 上告诉我。

我有一个前端学习交流QQ群：328058344 若是你在学习前端的过程当中遇到什么问题，欢迎来个人QQ群提问，群里天天还会更新一些学习资源。禁止闲聊，非喜勿进。