樣式預處理
樣式最基本的語法(syntax)是selectors，就是乙個宣告(declaration)，告訴排版引擎：將我宣告的選擇器(selectors)，按我的呈現規則(rules)來渲染。
面向設計稿書寫完樣式，日常最基本需求：如顏色或內外間距要修改、公用部分樣式、層級巢狀選擇器書寫、元件化樣式分割然後合併、相容性字首…，都是要手動一條條修改新增；高階點的需求，如顏色計算、數學計算、條件執行、迴圈處理，要麼借助第三方工具手動操作，要麼無解。
因此，我們需要乙個樣式「工程化」的解決方案，因此，css預處理來了，它提供了程式語言中基本語法和函式介面等一般程式設計所需的抽象機制，可以「編譯」打包成符合css標準的樣式檔案，這樣邏輯化、程式化css**，好重用、好維護、好擴充套件。另外還有postcss這類css後處理實現。區別在於預處理器需要先按特定的語法和邏輯規則書寫**，然後進行編譯，後處理器是直接操作css源**進行解析編譯。
css預處理目前實現有sass、less、stylus；
它們大多具有「變數(variables)巢狀(nesting)、混合(mixins)、擴充套件(extends)、色彩函式(color operations)、迴圈(loops)、math、匯入(imports)、流程控制宣告(if/else/for/each/while)、運算子」等程式語言風格的語法和功能，使用場景、需求方案上都差不多，擁護群體都多；
熟悉一種，切換到另一種也不是難事，最終都是要結合中大型專案和打包才能發揮其作用；
如果有用到像jade這種縮排式風格模板引擎(template engine)的，就選sass或stylus，接近css語法的就選less、scss；
建議參考bootstrap和weui原始碼。
預處理只是囿於當前標準規範在技術方案上的權宜之計，隨著需求，必定會有標準規範和更先進的技術方案誕生(適用於其它方面)，可以關注cssnext了解css features。
樣式宣告
遵循選定的規範，不用標籤選擇器、全域性選擇器，不用!important。
書寫樣式，建議採用emmet方案，快。
建議按以下順序宣告樣式，便於維護：
盒模型方位順序：上、右、下、左；
不建議按屬性首字母順序宣告樣式，如position: absolute;中的top/right/bottom/left定位宣告，還有width/height的宣告，中間會有其它屬性間隔，不能便捷的新增和修改。
參考：
1234567
891011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
5657
5859
6061
6263
6465
6667
6869
7071
7273
7475
7677
7879
8081
8283
8485
8687
8889
9091
9293
94
selector
擴充套件閱讀：
（本篇結束）
許可協議：自由**-保持署名-非商業性使用-禁止演繹 (cc by-nc-nd 4.0)
by 小可 from
無廢話網頁重構系列 （1）為什麼要寫這個系列
出於興趣，選擇從事web重構工作，也非常幸運，能夠將興趣與工作結合在一起，既保證了公司和個人的收入，又能倒騰愛好。到目前為止，一直就職於中小型網際網路公司從事web重構開發，在專案與技術結合方面，比較幸運的是專案有 舊衣翻新 也有 無中生有 技術點是 無所不用其極 當然，在小團隊中會有較多侷限性，姑...
無廢話WPF系列16 資源
在wpf中資源通常用作 樣式 style 樣式模板 資料模板等。一 資源的定義及使用 1.應用程式級資源 xmlns xmlns x 使用應用程式集資源 2.窗體級資源 定義在window或page中，作為乙個窗體或頁面共享的資源存在 3.檔案級資源 定義在資源字典的xaml檔案中，再引用 在vis...
（原創）無廢話C 設計模式系列文章
本系列文章從公司內部的知識分享修改而來，有錯誤或誤導請指出。謝謝。原創 無廢話c 設計模式之一 開篇 原創 無廢話c 設計模式之二 singleton 原創 無廢話c 設計模式之三 abstract factory 原創 無廢話c 設計模式之四 factory method 原創 無廢話c 設計模式...