介紹一個(gè)好玩的工具。lolcat ：一個(gè)在 Linux 終端中輸出彩虹特效的命令行工具
正式開始
- CSS預(yù)處理器（處理瀏覽器）
- sass、less、stylus
- 預(yù)處理器常用規(guī)范
- 變量
- 混合（Mixin）Extend
- 嵌套規(guī)則
- 運(yùn)算
- 函數(shù)
- Namespaces & Accessors
- Scope
- 注釋
- CSS后處理器（該刪的刪，該加的加，增加前綴，包括可以兼容IE6）
- CSS壓縮 CLEAN-CSS
- 自動(dòng)添加瀏覽器前綴 Autoprefixer
- CSS更加美觀排序 CSScomb
- Rework（編譯壓縮等）取代Stylus（只能負(fù)責(zé)編譯） 后處理器發(fā)熱
- 前后通吃PostCSS
css處理被分成了兩步，一步是sass、less，一步是到上線前的后處理器（通過AST‘抽象語法樹’去分析）
POSTCSS值得收藏的插件
- POSTCSS-CUSTOM-PROPERTIES運(yùn)行時(shí)變量
- POSTCSS-SIMPLE-VARS 與SASS一致的變量實(shí)現(xiàn)
- POSTCSS-MIXINS 實(shí)現(xiàn)類似SASS的@MIXIN的功能
- POSTCSS-EXTEND 實(shí)現(xiàn)類似SASS的繼承功能
- POSTCSS-IMPORT 實(shí)現(xiàn)類似SASS的IMPORT
- CSSNEXT 面向未來 CSS Grace 修復(fù)過去
編譯node不需要webpack，我們用gulp+rollup（tree shaking）。
面向?qū)ο蟮腃SS
- OO CSS的概念解讀
- OO CSS的作用和注意事項(xiàng)
- OO CSS代碼實(shí)戰(zhàn)
眾多開發(fā)者忽視了CSS的表現(xiàn)（認(rèn)為他太過簡(jiǎn)單，是一種機(jī)械的工作），而且更多關(guān)注在JavaScript的性能上或者其他方面。
OO CSS將頁(yè)面可重用元素抽象成一個(gè)類，用Class加以描述，而與其對(duì)應(yīng)的HTML即可看成是此類的一個(gè)實(shí)例。
CSS分層與面向?qū)ο?/h4>
為什么要分層？
- SMACSS
- BEM
- SUIT
- ACSS
- ITCSS
原因：
- CSS有語義化的命名約定和CSS層的分離，將有助于它的可擴(kuò)展性，性能的提高和代碼的組織管理。
- 大量的樣式、覆蓋、權(quán)重和很多！important，分好層可以讓團(tuán)隊(duì)命名統(tǒng)一規(guī)范，方便維護(hù)。
- 有責(zé)任感地去命名你的選擇器。
BEM
- BEM和SMACSS非常類似，主要用來如何給項(xiàng)目命名。一個(gè)簡(jiǎn)單命名更容易讓別人一起工作。比如選項(xiàng)卡導(dǎo)航是一個(gè)塊（Block），這個(gè)塊里的元素是其中標(biāo)簽之一（Element），而當(dāng)前選項(xiàng)卡是一個(gè)修飾狀態(tài)（Modifier）
- block 代表了更高級(jí)別的抽象或組件
- block__element 代表block后代，用于形成一個(gè)完整的block的整體
- block_modifier 代表block的不用狀態(tài)或不同版本
- 修飾符使用的是‘’，子模塊使用‘_’，單詞連接用‘-’
BEM示例
防止被侵入，做一個(gè)namespace
ACSS
-
考慮如何設(shè)計(jì)一個(gè)系統(tǒng)的接口。原子（Atoms）是創(chuàng)建一個(gè)區(qū)塊的最基本的特質(zhì)，比如說表單按鈕。分子（Molecules）是很多個(gè)原子（Atoms）的組合，比如說一個(gè)表單中包括了一個(gè)標(biāo)簽，輸入框和按鈕。生物（Organisms）是眾多分子（Molecules）的組合物，比如一個(gè)網(wǎng)站的頂部區(qū)域，他包括了網(wǎng)站的標(biāo)題、導(dǎo)航等。而模板（Templates）又是眾多生物（Organisms）的結(jié)合體。比如一個(gè)網(wǎng)站頁(yè)面的布局。而最后的頁(yè)面就是特殊的模板。
ACSS
cssnext + postcss + bem + oocss + acss + csshint/eslint + webpack + node + cdn + md5(etag)
