一 儘量減少**重複
1.按鈕
#btn2.**易維護vs. **量少
3.currentcolor 自動從文字那獲取顏色值
hr3.繼承 inherit
inherit 可以用在任何css 屬性中，而且它總是繫結到父元素的計
算值（對偽元素來說，則會取生成該偽元素的宿主元素）
這個inherit 關鍵字對於背景色同樣非常有用。舉個例子，在建立提
示框的時候，你可能希望它的小箭頭能夠自動繼承背景和邊框的樣式（
.callout .callout::before二 相信你的眼睛，而不是數字
人的眼睛並不是一台完美的輸入裝置。有時候精準的尺度看起來並不精
準，而我們的設計需要順應這種偏差。舉乙個在視覺設計領域廣為人知的例
子吧，我們的眼睛在看到乙個完美垂直居中的物體時，會感覺它並不居中。
實際上，我們應該把這個物體從幾何學的中心點再稍微向上挪一點，才能取
得理想的視覺效果
三 關於響應式網頁設計
你新增的**查詢越多，你的css**就會變得越來越經不起折騰。
**查詢的斷點不應該由具體的裝置來決定,而應該根據設計自身來決定
1.**查詢的注意和建議：
1> 使用百分比長度來取代固定長度。如果實在做不到這一點，也應該
嘗試使用與視口相關的單位（vw、vh、vmin 和vmax），它們的值解
析為視口寬度或高度的百分比。
2> 當你需要在較大解析度下得到固定寬度時，使用 max-width 而不是
width，因為它可以適應較小的解析度，而無需使用**查詢。
3> 不要忘記為替換元素（比如 img、object、video、iframe 等）設
置乙個max-width，值為100%。
5> 假如背景需要完整地鋪滿乙個容器，不管容器的尺寸如何變化，
background-size: cover 這個屬性都可以做到。但是，我們也要時
刻牢記——頻寬並不是無限的，因此在移動網頁中通過css 把一張
大圖縮小顯示往往是不太明智的。
6> 當（或其他元素）以行列式進行布局時，讓視口的寬度來決定
列的數量。彈性盒布局（即flexbox）或者display: inline-block
加上常規的文字折行行為，都可以實現這一點。
7> 在使用多列文字時，指定 column-width（列寬）而不是指定
column-count（列數），這樣它就可以在較小的螢幕上自動顯示為單
列布局。
總的來說，我們的思路是盡最大努力實現彈性可伸縮的布局，並在**
查詢的各個斷點區間內指定相應的尺寸。
四 合理使用簡寫
合理使用簡寫
是一種良好的防衛性編碼方式，可以抵禦未來的風險。當然，如果我們要明
確地去覆蓋某個具體的展開式屬性並保留其他相關樣式，那就需要用展開式
屬性
#box#box現在，我們只需要在一處修改，就可以改變所有的background-size
和background-repeat 了。你會發現這個技巧在本書中的使用非常普遍。
五 我應該使用預處理器嗎
如果使用得當，它們在大型專案中可以讓**更加靈活
1> css 的檔案體積和複雜度可能會失控
2> 除錯難度會增加
小花絮 ：
怪異的簡寫語法
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...
CSS基礎01 CSS簡介
html只關注內容的語義，雖然也可以做一些簡單的顏色 規格設定，但是十分繁瑣。css是層疊樣式表 cascading style sheets 的簡稱，有時也被稱為css樣式表或級聯樣式表。css也是一種標記語言，css主要用於設定html中的文字格式 字型 大小 對齊方式等 的外形 寬高 邊框樣式...