5步減少你的CSS樣式表

時間 2019-11-12

標籤減少 css 樣式欄目 CSS 简体版

原文原文鏈接

第一步:學會如何組合選擇器

什麼是選擇器?
若是你還不知道什麼叫作」選擇器」，你能夠先參考一下w3schools.com的CSS語法概述。php

未優化的CSS代碼
在下面的圖例中，你會看到來自三個不一樣選擇器的一樣的CSS屬性聲明。css

點擊小圖瀏覽清晰大圖html

優化的CSS代碼
你能夠將上面的css代碼優化組合，讓全部CSS選擇器使用同一組屬性。每一個選擇器之間用逗號分割開，像下面這樣。web

h2, p, .block {
  font-size: 1.5em;
  padding: 10px 10px 10px 25px;
  margin: 10px 0;
  border: 1px solid #ddd;
  background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}

第二步:瞭解CSS選擇器優先級

什麼是CSS優先級?
選擇器優先級是用於在CSS代碼中同一個選擇器使用不一樣屬性時CSS優選處理哪些屬性的規則。對選擇器優先級不瞭解的話能夠參考:Juicy Studio –選擇器優先級ide

未優化的CSS代碼
理解優先級規則中不一樣等級重要性是很必要的，若是寫了一樣優先級的CSS聲明將有可能致使代碼衝突和代碼臃腫。優化

點擊小圖瀏覽清晰大圖網站

查看Demo實例ui

優化的CSS代碼
當你徹底掌握CSS選擇器優先級以後，你便能經過合併統一的屬性聲明來所見代碼量，而後再單獨聲明元素的獨有屬性。你會很快找到優化CSS代碼的技巧，對完成合並和匹配代碼。下面是關於優化上圖代碼的實例:url

h2 {
  font-size: 1.5em;
  padding: 10px 10px 10px 25px;
  margin: 10px 0;
  border: 1px solid #ddd;
  background: #f0f0f0 no-repeat 5px 10px;
}

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}

#featured h2.twitter {
  background-color: #fffdd7;
  border: 1px solid #ddd991;
}

你還能夠參考如下相關文章:spa

第三步:學會如何合併類和ID

和以前相似，你也能夠經過匹配合並class名和id值來優化你的CSS代碼。請記住,爲同一個元素添加不一樣的多個class，你就能夠經過組合不一樣的屬性聲明在實現你但願的效果。在適當的位置添加id屬性也是可讓你對樣式有更多的控制權。

HTML

<div id="featured">
  <h2 class="best double">Best of</h2>
  <h2 class="fav double">Popular Posts</h2>
</div>
<div id="disable">
  <h2 class="comments double">Comments</h2>
  <h2 class="twitter double">Twitter</h2>
</div>

CSS

...

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
h2.tools {background-image: url(wrench_screwdriver.gif);}

h2.double {
  width: 263px;
  float: left;
  margin: 0;
}
#featured h2.double {
  background-color: #ffe2e2;
}
#disable h2 {
filter:alpha(opacity=40);
opacity:.40;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  background-color: #d5d5d5;
}