01--css編碼技巧--css揭秘，01--css--css揭秘

01--css編碼技巧--css揭秘，01--css--css揭秘

一 盡量減少代碼重複

1.按鈕

#btn {    padding: .3em .8em;    border: 1px solid #446d88;    background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);    border-radius: .2em;    box-shadow: 0 .05em .25em gray;    color: white;    text-shadow: 0 -.05em .05em #335166;    font-size: 125%;    line-height: 1.5;}

 

2.代碼易維護vs. 代碼量少

3.currentColor 自動從文本那擷取顏色值

hr {    height: .5em;    background: currentColor;}

 

3.繼承 inherit
inherit 可以用在任何CSS 屬性中，而且它總是綁定到父元素的計
算值（對虛擬元素來說，則會取產生該虛擬元素的宿主要元素）
這個inherit 關鍵字對於背景色同樣非常有用。舉個例子，在建立提
示框的時候，你可能希望它的小箭頭能夠自動繼承背景和邊框的樣式（

.callout { position: relative; }.callout::before {    content: "";    position: absolute;    top: -.4em; left: 1em;    padding: .35em;    background: inherit;    border: inherit;    border-right: 0;    border-bottom: 0;    transform: rotate(45deg);}

 

二 相信你的眼睛，而不是數字

人的眼睛並不是一台完美的輸入裝置。有時候精準的尺度看起來並不精
准，而我們的設計需要順應這種偏差。舉一個在視覺設計領域廣為人知的例
子吧，我們的眼睛在看到一個完美垂直置中的物體時，會感覺它並不置中。
實際上，我們應該把這個物體從幾何學的中心點再稍微向上挪一點，才能取
得理想的視覺效果

三 關於響應式網頁設計

你添加的媒體查詢越多，你的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 {    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;}

#box {    background: url(tr.png) top right,    url(br.png) bottom right,    url(bl.png) bottom left;    background-size: 2em 2em;    background-repeat: no-repeat;}

現在，我們只需要在一處修改，就可以改變所有的background-size
和background-repeat 了。你會發現這個技巧在本書中的使用非常普遍。

五 我應該使用前置處理器嗎
如果使用得當，它們在大型項目中可以讓代碼更加靈活
1> CSS 的檔案體積和複雜度可能會失控
2> 調試難度會增加

小花絮 ：
怪異的簡寫文法