CSS編碼技巧

本文將從dry、currentcolor、inherit和合理使用簡寫這幾方面來詳細介紹css編碼技巧

dry，即don`t repeat yourself，儘量減少**重複

在軟體開發中，保持**的dry和可維護性是最大的挑戰之一，而這句話對css也是適用的。在實踐中，**可維護性的最大要素是儘量減少改動時要編輯的地方

靈活的css通常更容易擴充套件。在寫出基礎樣式之後，只用極少的**就可以擴充套件出不同的變體，因為僅需覆蓋一些變數就可以了

下面這段**在可維護性方面存在一些問題

yes

效果如下

下面來對上面糟糕的**一一修復

1、如果決定改變字型大小，就得同時調整行高，因為這兩個屬性都寫成了絕對值。當某些值相互依賴時，它們的相互關係要用**表達出來

font-size:20px;
line-height:1.5;

2、如果把這些長度值都改成em單位，那這些效果的值就可以都變成可縮放的了，而且是依賴字型大小進行縮放

padding:.3em .8em;
border:1px solid #446d88;
background:#58a linear-gradient(#77aebb,#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;

3、顏色是另乙個重要的變數。如果要改變顏色，可能需要覆蓋四條宣告(border-color、background、box-shadow和text-shadow)

其實只要把半透明的黑色或白色疊加在主色調上，即可產生主色調的亮色和暗色變體，這樣就能簡單地化解這個難題了

padding:.3em .8em;
border:1px solid rgba(0,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,0.5);
color:white;
text-shadow:0 -.05em .05em rgba(0,0,0,0.5);
font-size:125%;
line-height:1.5;

現在只需要覆蓋background-color屬性，就可以得到不同顏色版本的按鈕了　

.no.ok

【**易維護vs**量少】

有時候，**易維護和**量少不可兼得。比如，為乙個元素新增一道10px寬的邊框，但左側不加邊框

border-width : 10px 10px 10px 0;

只要這一條宣告就可以搞定了，但如果日後要改動邊框的寬度，需要同時改三個地方。如果把它拆成兩條宣告的話，改起來就容易多了，而且可讀性或許更好一些

border-width: 1px;
border-left-width: 0;

在css3中，得到了乙個特殊的顏色關鍵字currentcolor，它是從svg那裡借鑑來的。這個關鍵字並沒有繫結到乙個固定的顏色值，而是一直被解析為color。實際上，這個特性讓它成為了css中有史以來的第乙個變數。雖然功能很有限，但它真的是個變數

舉個例子，讓所有的水平分割線自動與文字的顏色保持一致。有了currentcolor之後，只需要這樣寫

hr

inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值(對偽元素來說，則會取生成該偽元素的宿主元素)

舉例來說，要把表單元素的字型設定為與頁面的其他部分相同，並不需要重複指定字型矚性，只需利用inherit的特性即可

input,select,button

與此類似，要把超連結的顏色設定為頁面中其他文字相同，也是用inherit

以下兩行css**並不是等價的

background : rebeccapurple

background-color : rebeccapurple

不要害怕使用簡寫屬性。合理使用簡寫是一種良好的防衛性編碼方式，可以抵禦未來的風險。當然，如果要明確地去覆蓋某個具體的展開式屬性並保留其他相關樣式，那就需用展開式屬性

background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(b1.png) no-repeat bottom left / 2em 2em;

可以簡寫為

background : ur1(tr.png) top right,
url(br.png) bottom right,
url(b1.png) bottom left;
background-size : 2em 2em;
background-repeat : no-repeat;

css編碼技巧

一儘量減少重複二使用一些技巧再通過少許的查詢實現響應式。這些技巧包括 1 使用百分比來代替固定寬度。如果實在做不到這一點可以使用與視口相關的單位 vw,vh,vmin,vmax 2 當需要在較大解析度下得到固定的寬度時，使用max width而不是width，因為它可以適應較小的解析度而無...

css 揭秘 CSS編碼技巧

喜歡的給我乙個星吧儘量減少改動時需要編輯的地方當某些值相互依賴時，應該把它們的相互關係用表示出來易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值每個查詢都會增加成本查詢的端點不應該由具體裝置來...

CSS編碼技巧

css編碼技巧

css 揭秘 CSS編碼技巧

css 揭秘 CSS編碼技巧

相關推薦