我已经想了很多关于自己编写的css，其当前的状态和这么多年来是如何改变的。
大多数项目中我都会通常使用“自己”的css，倾向于自己的习惯，将记在脑海中的东西运用到现在的项目中，这对于管理css来说是一件可怕的事情。这让其他人更难在项目中做出贡献，也难以维护一个更大的项目，还难以编写出干净的代码。
bootstrap，bem，smacc和其他的框架与方法，通过实践证明，最好学使用常用的名给你的元素全名。
<a target="_blank"></a>
我们都知道，css入门简单，深入就比较难。可谓是，样式简单，但难以维护。需要考虑大量的样式，覆盖、权重和很多<code>!important</code>。
<code>div {</code>
<code>font-size: 14px;</code>
<code>margin: 0 0 20px;</code>
<code>padding: 10px;</code>
<code>}</code>
自从2007年sass诞生以来，对于导入和维护多个样式表尤其有用。特别是其变量，复用模式和其他强大的特性。
sass(syntactically awesome style sheets)是第一种语法格式。scss(sassy css)是后面出来的一种sass语法，其更类似于css语法。你可能比较喜欢使用scss。到现在，我无法想象在项目中不使用scss，而只纯使用css是怎样的痛苦。
<code>$primary-color: purple;</code>
<code>ul {</code>
<code>li {</code>
<code>margin-bottom: 20px;</code>
<code>a {</code>
<code>color: $primary-color;</code>
<a href="http://sass-lang.com/" target="_blank">sass官网</a>
<a href="http://sass-guidelin.es/" target="_blank">sass指南</a>
<a href="http://sass.io/" target="_blank">sass项目</a>
<a href="http://www.sache.in/" target="_blank">discover sass & compass extensions</a>
<a href="http://www.w3cplus.com/blog/tags/302.html" target="_blank">sass中文教程</a>
<a href="https://github.com/airen/sass_mixins_function" target="_blank">sass资源链接</a>
compass的mixin非常的方便。对我来说，compass一个最大的特性是，解决了浏览器前缀的问题。不用担心没输入浏览器前缀而引起的浏览器渲染问题。
<code>@import "compass/css3"</code>
<code>@include border-radius(5px);</code>
<code>@include box-shadow(0 0 10px rgba(0, 0, 0, .1));</code>
compass其实是sass的一个扩展，也可以说是最早使用sass写的一个扩展（框架），并且是一个开源框 架，其最大的特色就是compass的mixins和functions可以帮助我们做很多事情，不需要了解这些mixins和function实质原理，只需要了解其怎么调用就行。这对于初学sass的同学，或使用sass来做项目的同学起到了很大的帮助，而对于想深入学习sass的同学，也提供了一个很好的样本。
<a href="http://compass-style.org/" target="_blank">compass官网</a>
<a href="https://github.com/compass/compass" target="_blank">compass项目源码</a>
<a href="http://leveluptuts.com/tutorials/compass-tutorials" target="_blank">compass视频</a>
less和sass非常类似，不同的是他依赖node（javascript）环境编译，而不是ruby环境。其实我自己从来没有使用less做过项目。
<code>@base: #f938ab;</code>
<code>.box-shadow(@style, @c) when (iscolor(@c)) {</code>
<code>-webkit-box-shadow: @style @c;</code>
<code>box-shadow: @style @c;</code>
<code>.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {</code>
<code>.box-shadow(@style, rgba(0, 0, 0, @alpha));</code>
<code>.box {</code>
<code>color: saturate(@base, 5%);</code>
<code>border-color: lighten(@base, 30%);</code>
<code>div { .box-shadow(0 0 5px, 30%) }</code>
<a href="http://lesscss.org/" target="_blank">less官网</a>
<a href="http://lesscss.net/" target="_blank">less官网（中文）</a>
<a href="http://www.imooc.com/learn/102" target="_blank">less即学即用</a>
更高层次是在项目中思考如何重用样式、模式和抽像模块。一个模块应该有一个主修饰符，不应该太具体或太深入，比如<code>.box-heading</code>要比<code>ul li .box-heading</code>更好。
<code><div class="item"></code>
<code><ul class="item-list"></code>
<code><li class="item-list--item"></code>
<code><h3 class="item-heading">...</code>
<code></code>
<code>.item {</code>
<code>...</code>
<code>.item-list {</code>
<code>}.item-list--item {</code>
<code>.item-heading {</code>
<a href="http://www.w3cplus.com/blog/tags/284.html" target="_blank">oocss中文资源</a>
<a href="http://appendto.com/2014/04/oocss/" target="_blank">what is oocss?</a>
<a href="http://oocss.org/" target="_blank">object-oriented css</a>
<a href="https://github.com/stubbornella/oocss/wiki" target="_blank">object oriented css</a>
<a href="http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/" target="_blank">an introduction to object oriented css (oocss)</a>
<a href="http://code.tutsplus.com/tutorials/object-oriented-css-what-how-and-why--net-6986" target="_blank">object-oriented css: what, how, and why</a>
<a href="http://philipwalton.com/articles/the-future-of-oocss-a-proposal/" target="_blank">the future of oocss: a proposal</a>
jonathan snook为smaccs写了一本书。其中最佳实践就是如何给你的html元素定义一个好的类名。
在整个系列中，包括了base（默认部分），modules(可重用部分),staes（状态，比如隐藏和当前）和主题(themes)。修饰符使用的是<code>--</code>，子模块使用<code>__</code>符号。
<code><div class=“container”></code>
<code><div class=“container-header”></code>
<code><div class=“container-header__title”></code>
<code><h1 class=“container-header__title--home”></code>
<a href="https://smacss.com/" target="_blank">smacss官网</a>
<a href="http://www.vanseodesign.com/css/smacss-introduction/" target="_blank">an introduction to smacss guidelines for writing css</a>
<a href="http://webdesign.tutsplus.com/courses/introduction-to-smacss" target="_blank">introduction to smacss</a>
和smaccs非常类似，主要用来如何给项目命名。一个简单命名和容易让别人一起工作的方法。比如选项卡导航是一个块(block)，这个块里的元素的是其中标签之一(element)，而当前选项卡是一个修饰状态(modifier)。
<code><ul class="menu"></code>
<code><li class="menu__item">...</li></code>
<code><li class="menu__item_state_current">...</li></code>
<code></ul></code>
<a href="http://www.w3cplus.com/blog/tags/325.html" target="_blank">bem中文资源</a>
<a href="https://bem.info/" target="_blank">bem官网</a>
<a href="http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/" target="_blank">a new front-end methodology: bem</a>
<a href="http://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403" target="_blank">an introduction to the bem methodology</a>
<a href="http://www.mathayward.com/modular-css-with-sass-and-bem/" target="_blank">modular css with sass & bem</a>
ccss是一个smacss和bem结合在一起的sass项目。他可以做为一个样板或指南，在团队的下一个项目中使用。
<a href="https://github.com/sathify/ccss" target="_blank">ccss</a>
<a href="http://www.sitepoint.com/introducing-ccss-component-css/" target="_blank">introducing ccss (component css)</a>
考虑如何设计一个系统的接口。原子(atoms)是创建一个区块的最基本的特质，比如说表单按钮。分子(molecules)是很多个原子(atoms)的组合，比如说一个表单中包括了一个标签，输入框和按钮。生物(organisms)是众多分子(molecules)的组合物，比如一个网站的顶部区域，他包括了网站的标题、导航等。而模板(templates)又是众多生物(organisms)的结合体。比如一个网站页面的布局。而最后的页面就是特殊的模板。
截官网上的一张图来说明：
atomic css
<a href="http://patternlab.io/" target="_blank">acss官网</a>
<a href="http://bradfrost.com/blog/post/atomic-web-design/" target="_blank">atomic design</a>
<a href="https://www.lucidchart.com/techblog/2014/01/31/atomic-css-tool-set/" target="_blank">atomic css as a tool set</a>
<a href="http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/" target="_blank">challenging css best practices</a>
<a href="http://www.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/" target="_blank">the “other” interface: atomic design with sass</a>
<a href="http://www.phase2technology.com/blog/your-frontend-methodology-is-all-of-them-atomic-design-patternlab/" target="_blank">your frontend methodology is all of them: atomic design & pattern lab</a>
<a href="http://www.slideshare.net/renatoiwa/acss" target="_blank">acss: rethinking css best practices</a>
阅读这些不同的框架和方法，可以让你更好的如何定义类名。它也让我意识到，我这么多年都是草率的在写css。
今年我打算使用smacss，oocss和bem这些方法来写css，并且让自己元素的命名与bootstrap框架中常用组件保持更紧密的结合，比如说按钮，警告信息，表单元素等。
css文件结构
最后我列出一些我将要用到的技巧，并且坚持做下去：
尽量不让自己的样式层级超过三层
尽量不使用<code>!important</code>，通过添加和使用类名，比如<code>.hidden</code>类名
尽量远离sass中介绍<code>@extend</code>的一般经验法则——他们有些是迷惑人
尽量在样式表中添加注释
此外，应该有一个可以展示元素样式的模块库
尽量不要使用<code>*</code>这样的全局选择器
javascript钩子是使用的类名，尽量加上前缀<code>js-</code>
尽量在项目中重复使用类名和模块
取名尽量和bootstrap框架的组件接近
在样式中避免使用<code>#id</code>
原文发布时间：2015-04-06
本文来自云栖合作伙伴“linux中国”