編寫靈活的CSS
靈活性
我們先來看一段代碼：
.noReusableButton{
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
}這個按鈕看上去挺正常的，但是要是想改一下字的大小怎麼辦，那這些絕對的值就都要改了。這樣並不是靈活的css哈。
下面的代碼就靈活多了：
.reusableButton{
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
}
.small{
font-size: 100%;
}
.large{
font-size: 175%;
}這裏主要有兩大塊作爲修改：
- font-size本身：這裏使用百分數來替代絕對值，使用相對父元素的相對大小，這樣頁面的字要整體修改就可以只改很少的地方。
- 行高，以及部分原來使用絕對長度的規則改爲使用em相對字號，這樣要是想改變按鈕的大小只需要改變字號就行。
除了大小，另一個我們需要關心的就是顏色了。在現在的狀態下，要改變顏色那就要改很多值。如果我們這樣改一下，修改按鈕顏色就改個背景就好了。
.reusableButton{
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white; text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height: 1.5;
}
.small{
font-size: 100%;
background-color: #c00;
}
.large{
font-size: 175%;
background-color: #6b0;
}可維護性與簡潔性
這倆一般是矛盾的
border-width: 10px 10px 10px 0;這個簡潔，但是要改的話要改3個地方。
border-width: 10px;
border-left-width: 0;這個維護性好，不簡潔。
當前顏色
新的顏色關鍵字currentColor，永遠指向color的值。
繼承
關鍵字inherit，這個關鍵字總是被遺忘，這個關鍵字可以應用在所有規則上，永遠是父元素同屬性的計算值對於僞元素，就是生成這個僞元素的元素。
來個例子：想在做一個有角的對話框的樣子
#inherit{
height:200px;
width:200px;
position: relative;
color:#fff;
background-color: #6b0;
border: 1px solid #c00;
padding:10px;
}
#inherit:before {
content: "";
position: absolute;
top: -.4em;
left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}這樣這個小角的背景和邊框就都不用操心了，直接改本元素就好。這裏有個小問題，絕對定位假裝自己是個角的其實是個方塊，因爲絕對定位，如果主元素的內容太靠邊會被方塊蓋住內容。
與其相信數字，不如相信你的眼睛
- 垂直居中的問題，如果完全垂直居中，人眼會覺得有點偏上；而相對幾何中心偏下一點會讓人覺得圖形位於正中。
- 同樣高寬的圓和矩形，圓形看起來較小。
- 對於一段英文文字來說，上下左右的內邊距相同看起來四周的空間並不相同，上下內邊距小一點，這樣四周纔看起來一樣。
響應式設計
現在大多數響應式設計都是通過media query來實現的。事實上所有的media query都增加了以後維護的開銷，而且media query並不是一個連續式的解決方案，而是階段式的，每個階段間有斷點。如果大部分樣式代碼並不是以彈性的方式來編寫的，那麼媒體查詢能做的只是修補某個特定分辨率下的特定問題——這本質上只是把灰塵掃到地毯下面而已。
所以，media query應該作爲最後一種手段來應用。
還有媒體查詢的斷點不應該由具體的設備來決定，而應該根據設計自身來決定。這不僅是因爲我們的網站需要面向的設備太多了，還因爲一個網站在桌面端可能會以任意尺寸的窗口來顯示。
下面還有一些建議,可能會幫你避免不必要的媒體查詢。
„
- 使用百分比長度來取代固定長度。如果實在做不到這一點，也應該嘗試使用與視口相關的單位(vw、vh、vmin 和vmax)，它們的值解析爲視口寬度或高度的百分比。
- 當你需要在較大分辨率下得到固定寬度時，使用 max-width而不是width，因爲它可以適應較小的分辨率，而無需使用媒體查詢。
- 不要忘記爲替換元素(比如 img、object、video、iframe等)設置一個max-width，值爲 100%。
- 假如背景圖片需要完整地鋪滿一個容器，不管容器的尺寸如何變化，background-size: cover 這個屬性都可以做到。但是，我們也要時刻牢記——帶寬並不是無限的，因此在移動網頁中通過CSS 把一張大圖縮小顯示往往是不太明智的。
- 當圖片(或其他元素)以行列式進行佈局時，讓視口的寬度來決定列的數量。彈性盒佈局(即 Flexbox)或者display: inline-block 加上常規的文本折行行爲，都可以實現這一點。
- 在使用多列文本時，指定column-width(列寬)而不是指定column-count(列數)，這樣它就可以在較小的屏幕上自動顯示爲單列布局。
合理使用簡寫
background: rebeccapurple;
background-color: rebeccapurple;這兩種寫法並不等價，有時它們表現相同，有時不同。
在使用展開式屬性的寫法時，通常會遇到這樣的問題：展開式寫法並不會幫助你清空所有相關的其他屬性，從而可能會干擾你想要達到的效果。
當然，你可以把所有的展開式屬性全都設置一遍，但你可能會漏掉幾個；又或者未來引入更多的展開式屬性，那時你的代碼就無法完全覆蓋它們了。
不要害怕使用簡寫屬性。合理使用簡寫 是一種良好的防衛性編碼方式，可以抵禦未來的風險。
當然，如果我們要明確地去覆蓋某個具體的展開式屬性並保留其他相關樣式，那就需要用展開式屬性。
展開式屬性與簡寫屬性的配合使用也是非常有用的，可以讓代碼更加 DRY。對於那些接受一個用逗號分隔的列表的屬性(比如 background)，尤其如此。
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-size 和 background-repeat 的值被 重複了三遍，儘管每層背景的這兩個值確實是相同的。
其實我們可以從CSS的“列表擴 散規則”那裏得到好處。它的意思是說，如果只爲某個屬性提供一個值，那它就會擴散並應用到列表中的每一項。因此，我們可以把這些重複的值從簡寫屬性中抽出來寫成一個展開式屬性：
background:
url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
