CSS編碼提示
減少重復的代碼
一個重要的組成部分就是盡可能減少必要的修改
看下面一個例子
button{
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;
}
當屬性相互依賴的時候,盡量去思考他們代碼中的關系,盡量減少絕對值的使用,對于button的大小而言,我們可以更改px屬性,相對父節點的font-size可以用em,相對根節點的font-size可以用rem。對于color,比如border-color,background,box-shadow,text-shadow屬性,如果當需求需要我們重寫這幾個屬性時候,我們需要去重新計算主色的深\淺值,我們可以通過半透明的白色和黑色去簡單的處理這些麻煩。
padding: .3em .8em;//parent font size
border:1px solid rgba(0,0,0,.1);
background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius:.2em; //parent font size
box-shadow:0 .05em ,25em rgba(0,0,0,.5);
border:white;
text-shadow:0 -.05em .05em rgba(0,0,0,.5);
font-size:125%; //parent font size
line-height:1.5; //font-size
下面的例子可以更清晰的告訴我們怎么去簡化代碼,寫出更優質可維護的CSS
Maintainability versus brevity
border-width:10px 10px 10px 0;//這里會用到3步修改,改右中上
border-width:10px;//這里只用到2步修改 全改,然后調整左
border-left-width:0;
這樣本來3步的操作就簡化成了2步的操作 效率快了33.3%
currentColor
使用currentColor代替絕對值顏色的使用,比如在border-color,the text-shadow and box-shadow colors ,outline-color,and others.
這里書中沒有直接的例子,,我就自己創了個栗子,大家看看效果-----
我們有一個a標簽文本為通知 前面會有個箭頭,平常狀態下字體和箭頭為黑色,移入時字體和箭頭為紅色。
如果平常來寫 我a:hover的時候 還需要對箭頭進行額外的處理,而這里箭頭的border-color用了currentColor之后就直接隨著a的color進行改變,否則還要對a:hover:before進行處理,
<a href="javascirpt:void;">通知</a>a{
color:black;
text-decoration:none;
}
a:before{
display:inline-block;
height:0;
width:0;
content:"";
border-width:7px;
border-style:solid;
border-color:transparent transparent transparent currentColor;
}
a:hover{
color:red;
}
Inheritance
這個屬性值可以在所有的CSS屬性中使用,他會計算出對應的父標簽的該屬性的值
用一個直觀的栗子來說明下我們這里的內層div的背景用inherit
<div class="d1">
<div class="d2"></div>
</div>
.d1{
width:100px;
height:100px;
background:red;
position:relative;
}
.d2{
width:50px;
height:50px;
position:absolute;
top:110%;
background:inherit;
}
這里的內層div的背景就會跟父層div的背景一樣,繼承過來了
---->當我在上面那個箭頭通知栗子里使用時,會出現
當我把值直接改成inherit時是不會出錯的
說明inherit這個值會繼承一個屬性的整個值 而不是單一繼承上左下右,與currentColor不同
同時我發現 我不加border-color時候,效果跟inherit一樣,可能chrome默認繼承了?
。。由于是全英文的,,查看的還需要翻譯,,不懂的地方還要進行測試擴充,所以內容并不多