CSS揭秘之《小技巧》

lordharrd 發(fā)布于2019-08-20 19:08 / 2427人閱讀

摘要：因為在所有的情況下，響應(yīng)式都不是唯一需要考慮的問題合理使用簡寫工作組可能會在未來引入更多的展開式屬性合理使用簡寫是一種良好的防衛(wèi)性編碼方式，可以抵御未來的風(fēng)險。試試用預(yù)處理器能否做到

1、在增強(qiáng)網(wǎng)頁設(shè)計效果時，應(yīng)該使用生成性內(nèi)容，而不是依賴冗余的標(biāo)簽和圖片。
2、要把表單元素的字體設(shè)定為與頁面的其他部分相同，你并不需要重復(fù)指定字體屬性，只需利用 inherit 的特性即可
3、利用 CSS 自身的機(jī)制來組織回退樣式，而不是依賴 CSS hack 來實現(xiàn)

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

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

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

8、盡量減少重復(fù)，也就是說盡量減少改動時需要編輯的點

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

9、代碼易維護(hù)和代碼量少不可兼得

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

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

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

11、合理利用繼承

a)要把表單元素的字體設(shè)定為與頁面的其他部分相同， 你并不需要重復(fù)指定字體屬性， 只需利用 inherit 的特性即可  eg:  input, select, button { font: inherit; }
b)要把超鏈接的顏色設(shè)定為與頁面中其他文本相同同樣可以用inherit eg:  a { color: inherit; }
c)比方說創(chuàng)建提示框時，希望提示框的小箭頭能自動繼承背景和邊框的樣式

12、每個媒體查詢都會增加成本，你添加的媒體查詢越多，你的css代碼就會變得越來越經(jīng)不起折騰，只有用對了才可能是利器
13、實現(xiàn)彈性可伸縮的布局，并在媒體查詢的各個斷點區(qū)間內(nèi)指定相應(yīng)的尺寸（如果你發(fā)現(xiàn)自己需要一大堆媒體查詢才能讓設(shè)計適應(yīng)大大小小的屏幕，那么不妨后退一步，重新審視你的代碼結(jié)構(gòu)。因為在所有的情況下，響應(yīng)式都不是唯一需要考慮的問題）
14、合理使用簡寫

a)CSS 工作組可能會在未來引入更多的展開式屬性,合理使用簡寫是一種良好的防衛(wèi)性編碼方式， 可以抵御未來的風(fēng)險。 
b)如果我們要明確地去覆蓋某個具體的展開式屬性并保留其他相關(guān)樣式， 那就需要用展開式屬性
c)列表擴(kuò)散規(guī)則：如果我們要明確地去覆蓋某個具體的展開式屬性并保留其他相關(guān)樣式， 那就需要用展開式屬性 
    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、養(yǎng)成隨手查閱語法的好習(xí)慣
16、原生特性通常比預(yù)處理器提供的版本要強(qiáng)大得多

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