CSS揭祕之《小技巧》

angelayun發表於2017-09-03
CSS

1、在增強網頁設計效果時，應該使用生成性內容，而不是依賴冗餘的標籤和圖片。
2、要把表單元素的字型設定為與頁面的其他部分相同，你並不需要重複指定字型屬性，只需利用 inherit 的特性即可
3、利用 CSS 自身的機制來組織回退樣式，而不是依賴 CSS hack 來實現

eg:正確的程式碼組織方式應該是先寫 “回退樣式”，再寫 “理想樣式”
background: #000;
background: rgba(0,0,0,0.75);

4、DRY(Don`t repeat yourself )
5、理解發現解決方案的過程比解決方案本身更重要
6、瀏覽器可以解析某個css特性並不代表它已經實現或正確實現了這個特性
7、瀏覽器字首：-ms-border-radius 和 -o-borderradius 這兩個屬性從來沒有在任何瀏覽器中出現過；因為 IE 和 Opera 從一
開始就是直接實現 border-radius 這個無字首版本的

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

8、儘量減少重複，也就是說盡量減少改動時需要編輯的點

a)當某些值相互依賴時，應該把它們的相互關係用程式碼表達出來
    font-size: 20px;
    line-height: 1.5;
b)比方說製作一個按鈕時把padding、margin、border-radius、text-shadow、box-shadow等設定為em單位
  相對於font-size而言的
c)顏色儘量寫成hsla而非rgba;因為它的字元長度更短，主要是重複度更低
  background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent)
  上面這句背景有漸變陰影  如果我要重新使用一個顏色的話，就直接background-color: #c00;

9、程式碼易維護和程式碼量少不可兼得

eg:border-width: 10px 10px 10px 0; 如果為了易維護的話，可能border-width: 10px;border-left-width: 0;這樣會更好一些

10、currentColor是css中有史以來的第一個變數

a)假設我們想讓所有水平分割線與文字的顏色保持一致hr {background: currentColor;}
b)沒有給邊框指定顏色， 它就會自動地從文字顏色那裡得到顏色。 這是因為 currentColor 本身就是很多 CSS 顏色屬性的初始值， 比如border-color 和 outline-color， 以及 text-shadow 和 box-shadow 的顏色值

11、合理利用繼承

a)要把表單元素的字型設定為與頁面的其他部分相同， 你並不需要重複指定字型屬性， 只需利用 inherit 的特性即可  eg:  input, select, button { font: inherit; }
b)要把超連結的顏色設定為與頁面中其他文字相同同樣可以用inherit eg:  a { color: inherit; }
c)比方說建立提示框時，希望提示框的小箭頭能自動繼承背景和邊框的樣式

12、每個媒體查詢都會增加成本，你新增的媒體查詢越多，你的css程式碼就會變得越來越經不起折騰，只有用對了才可能是利器
13、實現彈性可伸縮的佈局， 並在媒體查詢的各個斷點區間內指定相應的尺寸（如果你發現自己需要一大堆媒體查詢才能讓設計適應大大小小的螢幕，那麼不妨後退一步， 重新審視你的程式碼結構。 因為在所有的情況下， 響應式都不是唯一需要考慮的問題）
14、合理使用簡寫

a)CSS 工作組可能會在未來引入更多的展開式屬性,合理使用簡寫是一種良好的防衛性編碼方式， 可以抵禦未來的風險。 
b)如果我們要明確地去覆蓋某個具體的展開式屬性並保留其他相關樣式， 那就需要用展開式屬性
c)列表擴散規則：如果我們要明確地去覆蓋某個具體的展開式屬性並保留其他相關樣式， 那就需要用展開式屬性 
    eg:比方說如下程式碼
        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;

15、養成隨手查閱語法的好習慣
16、原生特性通常比前處理器提供的版本要強大得多

a)eg:前處理器完全不知道如何完成 100% - 50px 這樣的計算， 因為在頁面真正被渲染之前， 百分比值是無法解析的。 但是， 原生CSS 的 calc() 在計算這樣的表示式時沒有任何壓力
b)再看看css變數 eg:以下程式碼在有序列表中， 列表項的背景色將是rebeccapurple； 但在無序列表中， 列表項的背景色將是 purple。 試試用前處理器能否做到
    ul { --accent-color: purple; }
    ol { --accent-color: rebeccapurple; }
    li { background: var(--accent-color); }

相關文章