免費(fèi)AI編程助手
CSS 編碼技巧
原文出處：http://www.w3cplus.com/css3/css-secrets/css-coding-tips.html
縮簡(jiǎn)代碼
在軟件開發(fā)過程中，保持代碼的簡(jiǎn)潔和可維護(hù)性是最大的挑戰(zhàn)，對(duì)于 CSS 來說，同樣如此。實(shí)際上，可維護(hù)代碼的一個(gè)重要特性就是要縮簡(jiǎn)需求變化時(shí)所需修改的代碼量。假設(shè)放大一個(gè)按鈕需要對(duì)十處代碼做出修改，那么你就有可能遺漏其中的一些細(xì)節(jié)，如果這些代碼本來就不是你寫的，那么就更有可能發(fā)生這種疏漏。即使需要修改的細(xì)節(jié)顯而易見，即使你準(zhǔn)確地找到了這些細(xì)節(jié)，那么你也在無(wú)形中浪費(fèi)了大量的時(shí)間——這些時(shí)間本該有更大的創(chuàng)造力。
此外，這并不只是應(yīng)對(duì)未來的需求變化?？蓴U(kuò)展的 CSS 在完成首次編寫后，只需要用少量代碼創(chuàng)建適當(dāng)?shù)淖兞?，那么進(jìn)行重寫和覆蓋時(shí)所需的代碼量就會(huì)很少。下面讓我們來看一個(gè)例子。
請(qǐng)先看一下下面的 CSS，它被用來美化下圖所示的按鈕：
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;這段代碼在可維護(hù)性上有幾點(diǎn)問題，讓我們來修改一下。首先看到的就是字體的單位。如果我們想要更改字體大小（比如為了創(chuàng)建更大、更顯眼的按鈕），那么就需要同時(shí)修改行間距，因?yàn)樗鼈冊(cè)谶@里使用的都是絕對(duì)值。此外，這里的行間距并不能有效地與字體大小關(guān)聯(lián)起來，以至于我們需要手動(dòng)計(jì)算各種字體大小下的行間距。當(dāng)屬性值相互關(guān)聯(lián)時(shí)，應(yīng)該在代碼中體現(xiàn)它們的關(guān)聯(lián)性。對(duì)于上述的代碼，行間距是行高的 150%，所以，使用下面的代碼將更具可維護(hù)性：
font-size: 20px;
line-height: 1.5;既然我們都寫成了這樣，為什么還要給字體大小指定一個(gè)絕對(duì)數(shù)值？雖然絕對(duì)數(shù)值易于使用，但是每次需求變化時(shí)你就需要重新修改，比如現(xiàn)在我們想讓父級(jí)字體更大一些，那么就需要在樣式表中使用絕對(duì)數(shù)值修改每一條相關(guān)的樣式規(guī)則，顯然這是不可取的。更好的方式是使用百分比或者類似 em 的單位：
font-size: 125%; /* 假設(shè)父級(jí)字體為 16px */
line-height: 1.5;現(xiàn)在，如果我修改了父級(jí)字體大小，那么按鈕也會(huì)相應(yīng)的變大。不過，按鈕看起來和之前不大一樣了,如下圖所示：
這是因?yàn)槠渌奶匦н€是和之前一樣袖珍，仍然不具有伸縮性。只需要使用類似 em 的單位，我們就可以將其他特效變成可伸縮的，最終所有的屬性值都關(guān)聯(lián)到了字體大小上。至此，我們只需修改字體大小就能控制整個(gè)按鈕的大小了。
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;現(xiàn)在，按鈕看起來很像是原始版本的放大版:
在這里，我們想要字體大小與父級(jí)字體相關(guān)聯(lián)，所以使用了 em。在某些情況下，你想要讓字體和根節(jié)點(diǎn)的字體相關(guān)聯(lián)（比如<html> 節(jié)點(diǎn)的字體），但是這時(shí)使用 em 就會(huì)讓計(jì)算變得非常復(fù)雜。此時(shí)，最好使用 rem 單位。雖然“相關(guān)性”在 CSS 中很重要，但你關(guān)聯(lián)前需要考慮下什么元素需要被關(guān)聯(lián)在一起。
請(qǐng)注意，在某些屬性上我們?nèi)匀皇褂昧私^對(duì)數(shù)值。對(duì)于按鈕的哪些效果需要可伸縮，哪些不需要可伸縮這一問題，應(yīng)該主觀判斷而不能客觀要求。比如此處的按鈕，不論按鈕如果縮放，我們始終要求它的邊框粗細(xì)為 1px。
不過，通常我們所需要修改的不只是按鈕的尺寸。對(duì)配色的修改也是一個(gè)很重要的方面。比如，如果我們想要?jiǎng)?chuàng)建一個(gè)紅色的“取消”按鈕，或者是綠色的 “OK” 按鈕又該如何做呢？一般來說，我們至少需要重寫四條樣式（border-color，background，box-shadow，text-shadow）。不用多說你也會(huì)理解，重新計(jì)算主體顏色（#58a）的亮度、理清所需顏色的亮度，將是一份非常麻煩的事情。此外，如果我們將按鈕添加到了非白色背景的頁(yè)面中，又該如何修改呢？實(shí)際上，上述按鈕的灰色陰影只在白色背景下才會(huì)效果明顯。
一個(gè)簡(jiǎn)單的修改方式是，對(duì)主體顏色的亮度疊加半透明的黑白色：
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height: 1.5;提示：使用
HSLA而不是RGBA表示半透明白色的好處在于，由于無(wú)需重復(fù)，它的字符更少，編寫的更快。
接下來，我們可以使用不同的顏色重寫背景顏色了,如下圖所示：
更多建議：