CSS揭秘之《小技巧》

kamushin233 發(fā)布于2019-08-29 13:20 / 2760人閱讀

摘要：因?yàn)樵谒械那闆r下，響應(yīng)式都不是唯一需要考慮的問(wèn)題合理使用簡(jiǎn)寫工作組可能會(huì)在未來(lái)引入更多的展開式屬性合理使用簡(jiǎn)寫是一種良好的防衛(wèi)性編碼方式，可以抵御未來(lái)的風(fēng)險(xiǎn)。試試用預(yù)處理器能否做到

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

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

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

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

8、盡量減少重復(fù)，也就是說(shuō)盡量減少改動(dòng)時(shí)需要編輯的點(diǎn)

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

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

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

10、currentColor是css中有史以來(lái)的第一個(gè)變量

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

11、合理利用繼承

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

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

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

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