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

1.png

2.png

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

6.png

這里的內層div的背景就會跟父層div的背景一樣，繼承過來了

---->當我在上面那個箭頭通知栗子里使用時，會出現

3.png

當我把值直接改成inherit時是不會出錯的

4.png

說明inherit這個值會繼承一個屬性的整個值 而不是單一繼承上左下右，與currentColor不同
同時我發現 我不加border-color時候，效果跟inherit一樣，可能chrome默認繼承了？

5.png

。。由于是全英文的，，查看的還需要翻譯，，不懂的地方還要進行測試擴充，所以內容并不多