我已經想了很多關于自己編寫的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中國”