CSS學習筆記

時間 2019-11-21

標籤 css 學習筆記欄目 CSS 简体版

原文原文鏈接

精通css

主要爲讀書筆記，也有一些技巧。喜歡點個贊喲，謝謝。css

css編寫原則

分離css和html的關注點：html負責標籤，css負責樣式html
關注html語義化，便於閱讀，便於爬蟲（seo）前端

不要使用font等樣式標籤
使用h5的結構標籤，header、footer、nav、section等
div和span是非語義化標籤，被用做鉤子綁定class類名，添加樣式
i和b標籤，僅僅表示斜體和加粗，而em和strong有強調的語義，從語義化角度應該使用後者
好的語義化標準：去掉css樣式，文檔可以正常閱讀
ie9支持全部h5標籤（額，暫未驗證！）

最小的顆粒是組件/函數，方便複用（Small pieces, loosely joined）

// 清除浮動函數
  .cf:before, .cf:after { content: " "; display: table; }
  .cf:after { clear: both; }
  .cf { *zoom: 1; }
複製代碼

漸進加強：瀏覽器遇到沒法識別的屬性時候會自動丟掉css3
- <input type="email" />，若是瀏覽器不支持email類型，則自動回退到默認值text
- css設定background: #000; background: rgba(0,0,0,1)，若是瀏覽器不支持rgba，則會自動丟棄rgba樣式
私有屬性：先私有後標準git

webkit-box-shadow: 0px 5px 15px #EFEFEF;
  box-shadow: 0px 5px 15px #EFEFEF;
複製代碼

檢測是否支持屬性@supports（筆者還沒有在實際中應用）

@supports(display: grid){
      若是支持grid，則下述css講做用。
  }
複製代碼

css模塊化

命名模塊化：BEM、OOCSS、SMACSS
css in js：在js中寫樣式，採用行內樣式（style），不須要查詢類
css modules：經過生成獨一無二的類名，避免外部樣式污染、內部樣式泄露

css優化：壓縮/減小請求次數/儘量提早早的加載

link引用CSS，會並行下載；@import引入，會依次下載github

漸進式加強和優雅降級

優雅降級，針對高級瀏覽器設計網站，後期對於「過期」瀏覽器進行降級調整。
漸進加強，以基礎版本開始，不斷擴充。

css基礎

選擇器類型

標籤：div{}
ID:#app{}
class: .banner{}
通配符：*{}
子代：p > span{}，
兄弟[~ +]：li + li{}
後代：p span{}
分組：html,body{}
屬性：input[type="radio"]{}
僞元素（::after）：div::after{clear: both}
僞類（:hover,focus,active,first-child,nth-of-child）：a:hover{}

補充說明下，選擇器的妙用：web

nth-child(-n + 3) 只選中前3個元素，更多案例
input僞類選擇器：required、focus、valid、invalid、checked、target、placeholder、read-only

選擇器等級

行內樣式大於引入樣式：<p style="color: red;"></p> >>> style/link
後來居上：p{color: red;} <<< p{color: yellow;}
important會提升等級：.app .banner{color: red} <<< .banner{color: yellow !important;}
在寫a標籤僞類樣式時，應該遵循:link，:visited，:hover，:focus，:active順序，由於選擇器等級相同
選擇器等級計算表

屬性繼承

默認繼承屬性：font/table等樣式
主動聲明繼承：inherit

// 有繼承性的屬性
一、font字體，color、font-size等。
二、文本系列屬性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color等。
三、表格屬性：caption-side、border-spacing、border-collapse。
四、列表屬性：list-style等。
五、全部元素可繼承：visibility、cursor等。

// 無繼承性的屬性
一、display、width、padding、margin、float、position、max-height、overflow、z-index等等。
二、文本屬性：vertical-align、text-decoration、text-shadow、white-space等。
三、背景屬性：background等
四、輪廓樣式：outline等。
五、清除浮動：clear等。
六、內容：content等。
複製代碼

文檔流和盒模型

文檔流、盒模型，控制着元素的排布。算法

正常文檔流：自上到下，自左到右，依次排布
脫離文檔流：float、position、fixed等元素，脫離正常文檔流
盒模型：content、padding、border、margin、outline（outline不影響佈局）
box-sizing控制着應該如何計算一個元素的總寬度和總高度

以下面demo，定義了padding: 20px; width:33.3%，默認狀況下會發生換行，若是設置box-sizing:border-box;，則width = border + padding + 內容的寬度瀏覽器

margin邊距疊加

元素在排布時，margin會發生疊加現象，具體說來：兄弟外邊距疊加，父子外邊距疊加。sass

外邊距疊加有利於文本排版，可是有時候咱們不想要這個效果，怎麼辦呢？

不發生外邊距疊加的條件：浮動元素不與其餘元素疊加，bfc不與子元素疊加，inline-block不與任何元素疊加

浮動的特性

浮動元素會脫離文檔流，爲兼容ie9及如下瀏覽器，業務中常常須要使用浮動佈局方案。

浮動效果，塊元素和行內元素效果以下：

清除浮動是很是常見的需求，最佳清除浮動代碼：

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
複製代碼

元素的包含塊

若某元素position:absolute; left: 50px;，他的定位基準是誰？若某元素width:100%，它的計算基準元素是誰？

這裏引出了一個重要概念---包含塊。包含塊也會影響元素的佈局，它決定了如何解釋各類屬性（如何計算值，及定位依據）？

如何肯定元素的包含塊？

html、body均爲包含塊
普通元素（realative/static/float），其包含塊爲父元素（塊級元素、td、th）
absolute定位元素，其包含塊爲position不爲static的父元素，或者根元素
fixed定位元素，其包含塊爲當前窗口或transform變化元素

如何計算元素的屬性值？

通常屬性參照當前元素的包含塊進行計算
transform: translate(10px, 0)參照元素自身Border-box
position: relative定位元素，其left/top參照自身，其他以父元素Content-box爲基準
position: absolute定位元素，以父元素Padding-box爲基準

左側圖片的高度未知，你有辦法讓右側p標籤與img同高嗎？（禁用flex、grid、table）查看demo

<div class="box">
  <img class="left" src="xxx.jpg"/>
  <p class="right">hello world!</p>
</div>
複製代碼

層疊上下文和層疊順序

層疊上下文是三維概念，設想元素在垂直屏幕的Z軸上。

如何建立層疊上下文？

根元素（html）、z-index不爲auto的絕對/相對定位、z-index不爲auto的flex子元素、opacity小於1的元素、transform不爲nonde的元素、filter不爲nonde的元素、will-change元素等等

在層疊上下文中，其元素依據z-index的值進行排布，排布的規則以下：

層疊上下文能夠包含在其餘層疊上下文中，以下面的demo，C元素在B的層疊上下文中排布，B元素同A、D元素依據層疊順序進行排布。

更詳細的層疊上下文和層疊順序推薦閱讀：深刻理解CSS中的層疊上下文和層疊順序

BFC & IFC & FFC & GFC

格式上下文也是很是重要的概念，影響着元素佈局的效果。

如何建立塊級格式上下文（BFC）？

根元素（html）、浮動元素、absolute/fixed定位元素、inline-block元素、overflow不爲visible元素、flex的直接子元素、grid的直接子元素、table-cell/table-caption/table-row/..等

BFC有以下特性：

Bfc爲獨立容器，內部元素的margin等不會影響到外部元素佈局！（body爲bfc！）
bfc內部的box，會發生margin重疊！
bfc不會與浮動元素髮生重疊！
bfc在計算高度時，會考慮內部浮動元素的高度！
bfc內的box自上而下依次排布，每一個box佔據一行

BFC規則的應用很是多，下面是基於BFC規則實現的浮動兩欄佈局：

如何建立行內格式上下文（IFC）？

僅包含內聯級別元素時會建立一個IFC（lineBox），IFC的高度基於line-height和vertical-align進行計算（不受pading/margin影響），其寬度由浮動狀況和它的包含塊決定，當寬度很大時會發生跨行（拆散爲多個ifc）

基於IFC規則實現的幽靈元素居中：

.user::before的定義是ifc的高度等於300px，經過設定vertical-align:middle使得居中對齊。另外，請關注span {width: 190px;}，若是未設定寬度是什麼效果？爲何會這樣？

<div class="user">
  <span>hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world!</span>
</div>

.user{
  position: relative;
  height: 300px;
  width: 300px;
  border: 1px solid #000;
  text-align: center;
}
.user::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
  width: 190px;
}
複製代碼

若是未給span設定寬度，span元素將沒法居中！猜想緣由以下：1.文本建立了一個ifc，若span未設置寬度，則其寬度由文本內容的寬度決定；2.未設定190px屬性，則寬度佔滿父元素的300px，發生換行顯示。

IFC的對齊方式有時候可能比較難以理解，推薦文章：christopheraue.net/design/vert…

如何建立網格佈局上下文（GFC）？

設置display:gird的元素將會生成網格容器，讓佈局從一維變成二維。

如何建立自適應格式上下文（FFC）？

設置display:flex的元素將會生成自適應容器，容器的每個子元素都是一個伸縮項目。在FFC中，對子元素設置vertical-align、float是無效的，容器元素同時設置column也是無效的。

文本相關屬性

排版屬性

經常使用的文本排版屬性：

color、font-family、font-size、line-height、vertical-align、font-weight、font-style、text-transform、word-spacing、letter-spacing

文本排版的技巧：

設置文本寬度爲：max-width: 36em; margin: 0 auto;
設置段首空格：p+p{text-indent: 1.25em}
設置文本對齊方式：text-align,left/right/center/justify/start/end
針對英文連字符：hyphens:auto
多列文本排列，columns指定列數
多行文本要設置break-word屬性，避免單詞或數字不換行超出！

單詞不換行超出demo，設定了寬度怎麼文字還超出了？

自定義字體

自定義字體在圖標上應用至關普遍，經常使用的圖標字體網站iconfont。

自定義字體的最佳兼容方案：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
複製代碼

若是某天UI要求文本使用非默認字體，你可能須要有必定的心理準備。字體文件通常都至關的大，下載很是耗時，常見的解決方案：

藉助JS實現平滑過渡：github.com/typekit/web…
使用字蛛，減少字體文件體積：font-spider.org/

文字陰影

使用text-shadow能夠設置很是漂亮的陰影效果，經過逗號能夠同時設置多道陰影，以下面demo：

更加牛逼的藝術字體，直接看別人的教程吧：practice.typekit.com/lesson/usin…

針對CSS沒法實現的效果，可使用JS實現：

漂亮的盒子

background屬性

background：#000、rgb(0,0,0)、rgba(0,0,0,0.5)、hsl()
background-image：背景圖片
background-repeat: repeat、no-repeat、space、round，新增background-repeat-x
background-image：url(...)、linear-gradient(45deg, #cfdfee, #4164aa)，支持路徑圖片，支持base64圖片、支持漸變
background-position：圖片定位
background-clip，圖片裁剪
background-origin，圖片左上角對齊方式 -backgroung-attachment：local、scroll、fixed，背景圖片在視口內固定或者隨着區塊滾動
background-size：contain、cover，背景圖片尺寸
縮寫： background: url(img/cat.jpg) 50% 50% / cover no-repeat padding-box content-box #bada55;

background使用技巧：

background-image和img有什麼區別？如何選取？
background支持多圖背景
漸變紋理圖片，lea.verou.me/css3pattern…

border屬性

border-radius，設置圓角
border-image邊框背景（IE10不支持）
box-shadow，盒子陰影

border技巧：

各類css形狀，如三角形、梯形等：tantek.com/CSS/Example…

經常使用佈局方案

水平佈局和垂直佈局是最多見的需求，實現方案很是多，咱們一塊兒探討下

水平佈局

舉一個常見例子，如今須要實現用戶樣式，左側是用戶圖片，右側是用戶姓名，要求垂直居中顯示，現給定以下代碼：

<div class="user">
  <img class="user-avatar" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567271267460&di=8e74e290191f83e701da4561dc99d2f7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01acc45607d5826ac7251df87e05b8.jpg%401280w_1l_2o_100sh.png" width="50"/>
  <p class="user-name">xiaoming</p>
</div>
複製代碼

float水平佈局

.user{
  clear: both
}
.user-avatar{
  float: left
}
.user-name{
  float: left;
  margin-top: 12px;
}
複製代碼

inline-block水平佈局

.user{
}
.user-avatar{
  display: inline-block;
  vertical-align: middle;
}
.user-name{
  display: inline-block;
}
複製代碼

table水平佈局

.user{
  display: table;
}
.user-avatar{
  display: table-cell;
}
.user-name{
  display: table-cell;
  vertical-align: middle;
}
複製代碼

flex水平佈局

.user{
  display: flex;
  align-items: center;
}
複製代碼

grid水平佈局

.user{
  display: grid;
  grid-template-columns: 50px 50px;
}
複製代碼

在上述方案中，inline-block佈局須要注意元素之間的間隙，能夠在父元素設置font-size:0進行消除。table佈局很容易實現元素居中效果，以下面demo：

垂直佈局

待補充案例

佈局方案對比

浮動佈局兼容性好，能夠多行佈局，具備自適應寬度特性，但須要清除浮動
inline-block佈局，能夠多行佈局，具備自適應寬度特性，但元素間有間距bug
table佈局兼容性好，能夠垂直居中元素。
flex佈局，IE10及以上可使用。
grid佈局須要考慮兼容性

flex介紹

能夠控制：元素尺寸（基於自身和有效剩餘空間）；佈局方向；對其方式，順序
兼容至ie10，可是須要考慮私有屬性（打包工具autoprefix自動補充前綴）
主軸和交叉軸。margin-auto的妙用
flex-basis/base-grow/base-shrink，basis定義空間從而計算剩餘空間量，grow定義對於剩餘空間的分配比例（剩餘空間按比例分配）。而shrink定義縮小規則（計算縮小尺寸公式：((500 × 1) / ((800 × 1) + (500 × 1))) * 300 = 115.4 ）。
縮寫形式：flex: 1 0 0%;， grow-shrink-basis
flex一樣支持多行佈局
flex有bug？github.com/philipwalto…
- 固定寬高比的元素如圖像和視頻，最好使用一個包裹元素。避免規範變化影響寬高比。
- flex-order就像z-index決定這層疊等級，還能夠單獨設置z-index（若是設定，order將失效）

grid介紹

待補充

柵格系統

經常使用於響應式設計，如知名庫Bootstrap

先構思，避免陷入麻煩。模塊化和組件化開發，佈局頁面？
總體佈局思路：柵格佈局？grid佈局？
固定佈局、流體佈局、彈性佈局：
- 固定佈局：施加特定尺寸的佈局，如定寬佈局
- 彈性佈局：ems中應用最多見？不理解
- 流體佈局：佈局元素設定百分比，大小比例（間距）保持不變？柵格系統 www.theguardian.com/internation…
建立柵格的2種方式：col-1of4： 25%；或者 row-quartet > * {25%}
頁面總體佈局和組件分離（佈局和內容分離）
水槽寬度計算，能夠設定百分比或者一個固定值。margin百分比相對於父元素寬度計算，em相對父元素字體計算
row容器使用margin：0 -1%，負邊距消除容器子元素左右2個變速的邊距。
使用padding計算排水溝，效果更簡單。
225，使用inline-block和flex加強佈局？
傳統方法基本都是從左到右進行佈局，如何進行2d維度佈局，grid

表單樣式

業務中使用表單很是多，咱們可能常常須要自定義表單控件，如radio/checkbox等等

經常使用表單表單樣式清除代碼：appearance: none; outline:none；border:none;

自定義checkbox

瀏覽器還沒有提供自定義修改checkbox的屬性，下面是配合label實現的demo：

input[type="checkbox"]{
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
}

input[type="checkbox"] + label{}
input[type="checkbox"]:checked + label{}
input[type="checkbox"]:focus + label{}
input[type="checkbox"]:focus:checked + label{}
複製代碼

自定義radio實現原理同上，故在此不單獨說明。

優秀的自定義checkbox案例：tympanus.net/Development…

自定義select

select樣式很難修改，傳統方案是使用div+span模擬實現，可是移動設備必須使用原生select標籤！

若是想要自定義select，能夠看看下面的兩種實現：

select2：JS模擬實現
純Css：儘可能抹平瀏覽器差別，www.filamentgroup.com/lab/select-…

Transform和動畫

transform變化

transform支持2d和3d變化。transform會建立新的layer，配合css動畫，性能卓越（but會消耗compose性能）

2d變化：translate、rotate、skew、scale、matrix
3d變化：transform3d、rotate3d
3d變化控制屬性：perspective、perspective-origin、backface-visibility、transform-style
transform-origin控制變化中心點
transform會建立新的層疊上下文，會建立新的視口（position：fixed將以它做爲新的參考）
建立transform動畫，建議定義初始值，避免動態添加）
transform案例：transform-skew變化特效

transition動畫

transition定義過分動畫，即屬性變化動畫

transition: box-shadow .15s, transform .15s;
動畫函數transition-timing-function： cubic-bezier.com
可動畫屬性：oli.jp/2010/css-an…
支持幀動畫，此處推薦掘金小冊：大廠 H5 開發實戰手冊

實現單向運動動畫，不進行反向運動(反向運動時長爲0或者無窮大)

在設置高度動畫時，height必須設置Number。若是高度是動態的，則推薦使用max-height屬性設置動畫，下面爲動態高度動畫：

animation動畫

animation定義幀動畫，經過關鍵幀能夠實現很是複雜的動畫

animation-delay定義動畫什麼時候開始
animation-direction指示動畫是否反向播放
animation-duration動畫週期時長
animation-fill-mode設置CSS動畫在執行以前和以後如何將樣式應用於其目標：效果演示
animation-iteration-count定義動畫循環次數
animation-play-state定義動畫播放暫停
animation-timing-function定義動畫的執行節奏

迪士尼動畫十二法則

理解還不夠深入，此處就不粘貼了。可是很是值得一看！

60fps（提升動畫性能）

css動畫性能，主要取決於重排重繪時間。
css動畫的js只在開始時計算一次，運行時再也不有js計算
js動畫使用requestAnimationFrame，而不要setTimeout
transfrom: translateZ(0);會建立新的Layer，避免重繪

重排重繪是性能的基礎，能夠在這個網站查詢哪些屬性會影響重排重繪，網站：csstriggers.com/

推薦閱讀這篇文章，做者講述的更加全面深入：H5動畫60fps之路

響應式web設計

響應式設計並不只侷限於改變佈局，經過媒體查詢能夠至關精確地對頁面進行重構，如：小屏幕擴大選擇區，元素的顯示隱藏，改變字體大小和行距等，從而提升閱讀體驗

響應式和分離式

分離式網站：pc和移動兩套代碼，提供差別化的體驗，可是須要維護兩套代碼
響應式網站：pc和移動使用一套代碼，省時省力，SEO好。可是使用兩組js操做同一個dom很是麻煩，比較難以精確控制，因爲增長了腳本和樣式的代碼量（可能影響性能）

響應式3要素

流動網格（彈性網格佈局）：根據視窗的百分比設定容器的寬度，從而使容器在瀏覽器窗口大小變化時自動縮放
媒體查詢：基於顯示設備的物理特性來調用不一樣的樣式表，如尺寸、分辨率（@media all (max-width: 320x)）
響應圖片：設置圖像所佔寬度至多爲設備的最大寬度（max-width），同時針對分辨率選取最佳圖片

視口概念

早期蘋果爲了手機可以顯示pc頁面，引入視口概念。視口影響着頁面的顯示效果，可使用viewport對視口進行控制，width=device-width設定佈局視口等於理想視口。

佈局視口（layout viewport）：iOS、安卓默認的佈局視口爲980px
可視視口（visual viewport）：物理屏幕的可視區域，可使用window.innerWidth獲取【視覺視口】。
理想視口（idea viewport）：即屏幕的分辨率，iPhone5分辨率爲320568，物理像素6401136
當前縮放值 = idea / visual，縮放的本質是對visual的操做，並不會影響佈局視口形成重繪

若是設定以下：<meta name="viewport" content="width=device-width, initial-scale=1.0">，則可視視圖爲320

若是設定以下：<meta name="viewport" content="initial-scale=2.0">，則可視視圖爲160，出現橫向滾動條，字體被放大2倍

響應式設計稿

媒體查詢語法

@media all and (min-width:800px) and (orientation:landscape) {}
@media not (all and ())
// 邏輯操做符：and or not only（only主要兼容舊瀏覽器！最好帶上！！！）
// width/height 視口寬高
// device-width 屏幕寬高
// orientation 橫向豎向
// aspect-ratio 視口寬高比
// device-aspect-ratio 平補的寬高比
// color 每種顏色？
// resolution 打印機分辨率
// 視口：佈局視口（頁面原有大小）/可視視口（手機上的可視視口,即屏幕寬度）/理想視口（使用可視視口布局？），在手機端能夠縮放網頁/滑動位置；
// <meta name="viewport" content="device-width" />開啓手機理想視口。手機的佈局視口依賴網頁設定？仍是手機本身設定？
複製代碼

響應式圖片

根據設備大小加載不一樣尺寸的圖片，經常使用的實現方式：

Js
srcset
picture
svg圖片，矢量圖形，隨意縮放

響應式字體

根據設備大小，設置字體的尺寸，經常使用的實現方式

em相對父元素，rem相對根元素（html），vw相對視口單位，若不考慮兼容性則推薦使用font-size：5vw。

實戰總結

圖片設置max-width，避免超出

可維護的CSS

可維護的要求

DRY原則，Don't repeat yourself
儘可能減小改動時要編輯的地方！
當某些值依賴時，儘可能把相互關係表達出來，如line-height和font-size（使用inherit繼承屬性）

預處理框架

sass
less
stylus

後處理框架postcss

PostCSS 這個術語能夠指代兩件事：一是 PostCSS 核心工具，二是基於 PostCSS 建立的插件系統。PostCSS 核心工具並不能直接用於處理樣式，只有配合它的插件，才能完成相關的編譯工做。

插件Autoprefixer，自動補充瀏覽器私有前綴
藉助其餘插件，postcss能夠擁有變量/混合/嵌套等等能力

文件命名規範

公共型樣式：標籤重置、通用佈局、通用模塊元件、功能樣式、皮膚樣式
特殊型樣式：頁面與網站總體差別較大的樣式
皮膚樣式：將顏色和背景抽離，非換膚類網頁慎用

<link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>
複製代碼

類命名規範

重置（reset）和默認（base）：消除默認樣式和瀏覽器差別，並設置部分標籤的初始樣式，以減小後面的重複勞動

1. Eric Meyer’s 「Reset CSS」 2.0
    2. Normalize.css
複製代碼

佈局（grid）：將頁面分割爲幾個大塊，一般有頭部、主體、主欄、側欄、尾部等
模塊（module）：一般是一個語義化的能夠重複使用的較大的總體！好比導航、登陸、註冊、各類列表、評論、搜索等
元件（unit）：一般是一個不可再分的較爲小巧的個體，一般被重複用於各類模塊中！好比按鈕、輸入框、loading、圖標等
功能（function）：爲方便一些經常使用樣式的使用，咱們將這些使用率較高的樣式剝離出來，按需使用，好比清除浮動等
皮膚（skin）：若是你須要把皮膚型的樣式抽離出來，一般爲文字色、背景色（圖）、邊框色等

補充說明：

不要用佈局去控制模塊或元件，模塊和元件應與佈局分離獨立；
不要經過模塊或其餘類來重定義或修改已經定義好的功能類選擇器和皮膚類選擇器
當模塊或元件互相嵌套，應該慎用標籤選擇器，避免樣式衝突

樣式編寫規範

根據屬性的重要性按順序書寫，先寫定位佈局屬性，後寫盒模型等自身屬性，最後是文本類及修飾類屬性
- 顯示屬性： display、visibility、position、float、clear、top
- 自身屬性：width、height、margin、padding、border、overflow、min-width
- 文本屬性和修飾屬性：font、text-align、text-decoration、vertical-align、white-space、color、background
若是屬性間存在關聯性，則不要隔開寫，如:

height: 18px;
    line-height: 18px;
複製代碼

先私有後標準，便於樣式降級~

BEM介紹

BEM的命名規則： 塊名__元素--修飾符

BEM的抽象理解：

BEM的優點：

使用惟一類名，避免形成樣式衝突
避免了位置依賴（不要使用以下形式定義屬性：.sidebar conent-title__reversed）
避免了深層嵌套bug，如使用h2選擇器，深層h2標籤將深受其害~~~（如定義h2{color: white !important;}，則上面的demo最終顯示什麼？）

BEM定義類名的原則：

單一原則：建立的類名必須有單一的、高度聚焦的理由。你應用到某個選擇器裏的樣式應該是爲了單一目的而建立的，而且可以很好地實現這個目標
單同樣式來源：若是組件受父類名限制，則應該將限制寫在該父組件的樣式文件中
分離容器和內容：要求頁面元素不依賴於其所處位置，在任何地方使用具備一致性
分離結構和主題：將視覺樣式效果單獨提取出來，拆分主題便於複用
區分佈局與組件角色和職責，以下面demo，rol、col關注佈局，media-block關注組件樣式：

BEM是一個優秀的模塊化方案，可是可能存在一些問題：

大量重複css代碼，如偏移：list-marginTop30 form-marginTop30
業務緊迫致使技術債，致使css的修改偏離了bem方案，常常重寫或者複製粘貼。

所以沒必要拘泥於BEM方案，技術最終服務於產品。

向函數式css演進

若是你正在開發企業後臺，對於樣式沒要求很是精準，推薦使用函數式css方案，它可以有效的減小css代碼重複量！

函數式CSS開源庫有不少，筆者在業務中基於tachyons進行了修改，打造本身的函數式css庫，如定義width的幾種方式：

/*
針對寬度，定製經常使用的css類名
.w-120 width: 120px
.w20 width: 20%
.w--auto width: auto
*/

.w-80{width: 80px;}
.w20{ width: 20%; }
.w--auto{ width: auto; }
.w--third { width: 33.333333%; }
複製代碼

css技巧

table-layout佈局

table-layout屬性定義了用於佈局表格單元格、行和列的算法。

auto，表格和單元格的寬度取決於其包含的內容，大多數瀏覽器默認值
fixed，表格和列的寬度經過具體width設定，可使用overflow屬性控制是否容許內容溢出

table{
    table-layout: fixed;
}
複製代碼

tableLayot-fixed：超出顯示省略號DEMO

css僞隨機

蟬原則，使用質數做爲循環週期來增長「天然隨機性」的策略（模擬天然的隨機效果）。如質數五、7的最小公倍數爲35。

// 隨機背景條紋
.stripes {
  background-color: #026873;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
}
// 隨機圓角效果，最小公倍數-質數相乘2310
.list:nth-child(2n + 1) {}
.list:nth-child(3n + 2) {}
.list:nth-child(5n + 3) {}
.list:nth-child(7n + 4) {}
.list:nth-child(11n + 5) {}
// 隨機動畫效果
animation: 1s spin, .7s radius, 1.1s color, 1.3s width;
複製代碼

隨機背景條紋效果圖：