CSS編碼提示

減少重復(fù)的代碼
一個(gè)重要的組成部分就是盡可能減少必要的修改
看下面一個(gè)例子

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;
}

當(dāng)屬性相互依賴的時(shí)候，盡量去思考他們代碼中的關(guān)系，盡量減少絕對(duì)值的使用，對(duì)于button的大小而言，我們可以更改px屬性，相對(duì)父節(jié)點(diǎn)的font-size可以用em，相對(duì)根節(jié)點(diǎn)的font-size可以用rem。對(duì)于color，比如border-color，background，box-shadow，text-shadow屬性，如果當(dāng)需求需要我們重寫這幾個(gè)屬性時(shí)候，我們需要去重新計(jì)算主色的深\淺值，我們可以通過(guò)半透明的白色和黑色去簡(jiǎn)單的處理這些麻煩。

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

下面的例子可以更清晰的告訴我們?cè)趺慈ズ?jiǎn)化代碼，寫出更優(yōu)質(zhì)可維護(hù)的CSS

Maintainability versus brevity

border-width:10px 10px 10px 0;//這里會(huì)用到3步修改，改右中上

border-width:10px;//這里只用到2步修改  全改，然后調(diào)整左
border-left-width:0;

這樣本來(lái)3步的操作就簡(jiǎn)化成了2步的操作 效率快了33.3%

currentColor

使用currentColor代替絕對(duì)值顏色的使用，比如在border-color,the text-shadow and box-shadow colors ,outline-color,and others.
這里書中沒(méi)有直接的例子，，我就自己創(chuàng)了個(gè)栗子，大家看看效果-----
我們有一個(gè)a標(biāo)簽文本為通知 前面會(huì)有個(gè)箭頭，平常狀態(tài)下字體和箭頭為黑色，移入時(shí)字體和箭頭為紅色。
如果平常來(lái)寫 我a:hover的時(shí)候 還需要對(duì)箭頭進(jìn)行額外的處理，而這里箭頭的border-color用了currentColor之后就直接隨著a的color進(jìn)行改變，否則還要對(duì)a:hover:before進(jìn)行處理，

<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;
}

1.png

2.png

Inheritance

這個(gè)屬性值可以在所有的CSS屬性中使用，他會(huì)計(jì)算出對(duì)應(yīng)的父標(biāo)簽的該屬性的值
用一個(gè)直觀的栗子來(lái)說(shuō)明下我們這里的內(nèi)層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;
}

6.png

這里的內(nèi)層div的背景就會(huì)跟父層div的背景一樣，繼承過(guò)來(lái)了

---->當(dāng)我在上面那個(gè)箭頭通知栗子里使用時(shí)，會(huì)出現(xiàn)

3.png

當(dāng)我把值直接改成inherit時(shí)是不會(huì)出錯(cuò)的

4.png

說(shuō)明inherit這個(gè)值會(huì)繼承一個(gè)屬性的整個(gè)值 而不是單一繼承上左下右，與currentColor不同
同時(shí)我發(fā)現(xiàn) 我不加border-color時(shí)候，效果跟inherit一樣，可能chrome默認(rèn)繼承了？

5.png

。。由于是全英文的，，查看的還需要翻譯，，不懂的地方還要進(jìn)行測(cè)試擴(kuò)充，所以內(nèi)容并不多