前言：
DRY 是 Don’t Repeat Yourself
第 1 章
盡量減少代碼重復(fù)
絕對值雖然容易掌控族操，但想修改的時候會比較麻煩
- 行高要反映出它跟字號
font-size: 20px;
line-height: 1.5;//行高是字號的 1.5 倍
- 字號最好不要定為絕對長度值
如果我們決定把父級的字號加大拟逮，就不得不修改每一處使用絕
對值作為字體尺寸的樣式。如果改用百分比或 em 單位就好多了
font-size: 125%; /* 假設(shè)父級的字號是 16px */
line-height: 1.5;
em和rem的區(qū)別
em 和 rem都是靈活、 可擴展的單位漓拾，由瀏覽器轉(zhuǎn)換為像素值听系，具體取決于您的設(shè)計中的字體大小設(shè)置。
- em的特點
-
瀏覽器默認1em=16px,所以0.75em=12px;
我們經(jīng)常會在頁面上看到根元素寫的font-size:65%; 這樣em就成了16px*62.5=10em;這是顯示在頁面的字體大小是10px; - 字體大小是根據(jù)父元素字體大小設(shè)置的
- em 單位的主要目的應(yīng)該是允許保持在一個特定的設(shè)計元素范圍內(nèi)的可擴展性
- 但是如果嵌套了多個元素 要計算它的大小,是件很頭疼的事情
- 這樣的情況下,就出現(xiàn)了rem
-
瀏覽器默認1em=16px,所以0.75em=12px;
- rem特點
- rem的大小是根據(jù)html根目錄下的字體大小進行計算的
- 當我們改變根目錄下的字體大小的時候芝此，下面字體都改變
- rem不僅可以設(shè)置字體的大小憋肖，也可以設(shè)置元素寬、高等屬性
- 根元素的字體大小 16px婚苹，10rem 將等同于 160px
- 使用 rem 單位的主要目的應(yīng)該是確保無論用戶如何設(shè)置自己的瀏覽器岸更，我們的布局都能調(diào)整到合適大小。
HSLA(H,S,L,A)
H：
Hue(色調(diào))膊升。0(或360)表示紅色怎炊，120表示綠色，240表示藍色廓译，也可取其他數(shù)值來指定顏色评肆。取值為：0 - 360
S：
Saturation(飽和度)。取值為：0.0% - 100.0%
L：
Lightness(亮度)非区。取值為：0.0% - 100.0%
A：
Alpha透明度瓜挽。取值0~1之間。
推 薦 使 用 HSLA 而 不 是RGBA 來產(chǎn)生半透明的白色征绸，因為它的字符長度更短久橙，敲起來也更快。這歸功于它的重復(fù)度更低
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
例子：https://jsfiddle.net/noyanse/o4v7mvgu/66/
currentColor
從SVG 那里借鑒來的,這個關(guān)鍵字并沒有綁定到一個固定的顏色值管怠，而是一直被解析為 color 淆衷。實際上，這個特性讓它成為了 CSS 中有史以來的第一個變量 渤弛。如果你沒有給邊框指定顏色祝拯，它就會自動地從文本顏色那里得到顏色。
例子：假設(shè)我們想讓所有的水平分割線（所有 hr 元素）自動與文本的顏色保持一致
hr {
height: .5em;
background: currentColor;
}
例子：
更改顏色：https://jsfiddle.net/noyanse/zb2cxLrf/5/
<style>
.icon{
display: inline-block;
width: 20px;
height: 20px;
//圖標把圖標部分刪除她肯，周圍用白色背景填充佳头，可以很省事。
background-image: url(sprite_icons.png);
background-position: 0 0;
background-color: currentColor;/*圖標隨著字體的顏色變化而變化*/
}
.link:hover{
color: red;
}
</style>
</head>
<body>
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
</body>
繼承inherit
inherit 可以用在任何 CSS 屬性中辕宏，而且它總是綁定到父元素的計
算值（對偽元素來說畜晰，則會取生成該偽元素的宿主元素）
如：要把表單元素的字體設(shè)定為與頁面的其他部分相同，你并不需要重復(fù)指定字體屬性瑞筐，只需利用 inherit 的特性即可https://jsfiddle.net/noyanse/5w99qq18/2/
inherit 關(guān)鍵字對于背景色同樣非常有用https://jsfiddle.net/noyanse/5judagt8/4/
相信你的眼睛凄鼻，而不是數(shù)字
人的眼睛并不是一臺完美的輸入設(shè)備。有時候精準的尺度看起來并不精準聚假，而我們的設(shè)計需要順應(yīng)這種偏差块蚌。舉一個在視覺設(shè)計領(lǐng)域廣為人知的例子吧，我們的眼睛在看到一個完美垂直居中的物體時膘格，會感覺它并不居中峭范。實際上，我們應(yīng)該把這個物體從幾何學(xué)的中心點再稍微向上挪一點才能取得理想的視覺效果瘪贱。
關(guān)于響應(yīng)式網(wǎng)頁設(shè)計
比較常見的實踐是用多種分辨率來測試一個網(wǎng)站纱控，然后添加越來越多的媒體查詢（Media Query）規(guī)則來修補網(wǎng)站在這些分辨率下出現(xiàn)的問題辆毡。然而對于今后的 CSS 改動來說，每個媒體查詢都會增加成本甜害，而這種成本是不應(yīng)輕易上升的舶掖。你添加的媒體查詢越多，你的 CSS代碼就會變得越來越經(jīng)不起折騰尔店。
這并不是說媒體查詢是一種不良實踐眨攘。只要用對了，它就是利器嚣州。但是鲫售，你只應(yīng)該把它作為最后的手段。
媒體查詢的斷點不應(yīng)該由具體的設(shè)備來決定该肴，而應(yīng)該根據(jù)設(shè)計自身來決定情竹。這不僅是因為我們的網(wǎng)站需要面向的設(shè)備太多了（尤其是考慮到未來的設(shè)備時），還因為一個網(wǎng)站在桌面端可能會以任意尺寸的窗口來顯示沙庐。如果你有信心自己的設(shè)計在任何可能出現(xiàn)的視口尺寸下都能良好工作鲤妥，誰關(guān)心這些設(shè)備的分辨率具體是多少呢？
下面還有一些建議拱雏，可能會幫你避免不必要的媒體查詢:
- 使用百分比長度來取代固定長度。如果實在做不到這一點底扳，也應(yīng)該
嘗試使用與視口相關(guān)的單位（ vw 铸抑、 vh 、 vmin 和 vmax ）衷模，它們的值解析為視口寬度或高度的百分比鹊汛。 - 當你需要在較大分辨率下得到固定寬度時，使用** max-width** 而不是width 阱冶，因為它可以適應(yīng)較小的分辨率刁憋，而無需使用媒體查詢。
- 不要忘記為替換元素（比如 img 木蹬、 object 至耻、 video 、 iframe 等）設(shè)置一個 max-width 镊叁，值為 100% 尘颓。
- 假如背景圖片需要完整地鋪滿一個容器晦譬，不管容器的尺寸如何變化，background-size: cover 這個屬性都可以做到敛腌。但是惫皱，我們也要時刻牢記——帶寬并不是無限的，因此在移動網(wǎng)頁中通過 CSS 把一張大圖縮小顯示往往是不太明智的尤莺。
- 當圖片（或其他元素）以行列式進行布局時逸吵，讓視口的寬度來決定
列的數(shù)量缝裁。彈性盒布局（即 Flexbox）或者 display: inline-block加上常規(guī)的文本折行行為，都可以實現(xiàn)這一點捷绑。 - 在使用多列文本時韩脑，指定 column-width （列寬）而不是指定column-count （列數(shù)），這樣它就可以在較小的屏幕上自動顯示為單列布局粹污。
盡最大努力實現(xiàn)彈性可伸縮的布局，并在媒體查詢的各個斷點區(qū)間內(nèi)指定相應(yīng)的尺寸壮吩。
如果你發(fā)現(xiàn)自己需要一大堆媒體查詢才能讓設(shè)計適應(yīng)大大小小的屏幕，那么不妨后退一步觉啊，重新審視你的代碼結(jié)構(gòu)沈贝。因為在所有的情況下，響應(yīng)式都不是唯一需要考慮的問題宋下。
合理使用簡寫
不要害怕使用簡寫屬性。合理使用簡寫是一種良好的防衛(wèi)性編碼方式学歧，可以抵御未來的風(fēng)險。
（/）分割是為了消除歧義袁铐，
top right 顯然是 background-position 伺帘，而 2em 2em 是background-size ，
不管它們的順序如何伪嫁。但是，請設(shè)想一下 50% 50% 這樣的值帝洪，它到底是 background-size 還是background-position 呢？
當你在使用展開式屬性時砚哗，CSS 解析器明白你的意圖砰奕；
而當你使用簡寫屬性時蛛芥，解析器需要在沒有屬性名提示的情況下
弄清楚 50% 50% 到底指什么。這就是需要引入斜杠的原因仅淑。
background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;
-------------------------------------------------------------------------------------------
background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
我應(yīng)該使用預(yù)處理器嗎
如果使用得當胸哥，它們在大型項目中可以讓代碼更加靈活
但也有缺點。
很多受預(yù)處理器啟發(fā)的特性都已經(jīng)以各種方式融入到原生 CSS 中了庐船。
這些原生特性通常比預(yù)處理器提供的版本要強大得多嘲更，因為它們是動態(tài)的。
- CSS 值與單位（第三版）中的 calc() 函數(shù)盗棵，不僅在處理運算時非常
強大北发，而且已經(jīng)得到了廣泛的支持喷屋，當下可用。 - CSS 顏色（第四版）（http://dev.w3.org/csswg/css-color）引入的 color()函數(shù)會提供顏色運算方法屯曹。
舉個例子，預(yù)處理器完全不知道如何完成100% - 50px 這樣的計算密任，因為在頁面真正被渲染之前偷俭，百分比值是無法解析的。但是淹遵，原生CSS 的 calc() 在計算這樣的表達式時沒有任何壓力。
變量玩法：
ul { --accent-color: #ccc; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }
建議是济炎，在每個項目開始時使用純 CSS辐真，只有當代碼開始變得無法保持 DRY 時，才切換到預(yù)處理器的方案侍咱。為了避免可能發(fā)生的“依賴”或“濫用”，在引入預(yù)處理器的問題上需要冷靜決策咙咽，不應(yīng)該在每個項目一開始時就不動腦筋順著慣性來淤年。
