閱讀CSS Secrets(一)

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,330評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,089評論 0 1
  • 1.CSS簡介 Cascading Style Sheet 層疊樣式表 主要用來定義頁面中的表現,HTML 描述頁...
    hyt222閱讀 854評論 0 0
  • 今天是我們分開的第四個月。 你走后,我一個人接受失去的疼痛,面對孤單的日子。 我還是很想你,我也終于可以忍住不去打...
    H路尋閱讀 369評論 0 0