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

第四步:学会CSS简写

CSS简写可让你将多行的CSS属性声明缩写成简单的一行代码。如今你在不少地方均可以找到CSS缩写的相关教程，你也能够浏览如下CSS缩写教程:

第五步:将你的样式表分红几部分–@import

在你完成一个比较大的网站项目时，你的样式表中的代码量是至关庞大的，也许会有不少不一样模块的CSS声明及注释。这种状况下，你能够考虑使用将一个庞大的样式表切割成几个不一样模块的小样式表，而后再用@import将他们组合起来。

HTML
你能够像日常同样调用一个样式表

CSS – styles.css
这时styles.css做为你的主样式表，它将负责调用其它子样式表。(我会把子样式表放在’styles’ 目录下以便于组织管理，纯属我的习惯，你也能够有本身的习惯)

@import "styles/main.css";
@import "styles/checkout.css";
@import "styles/shoppingcart.css";

译者注:@import虽然可以为某个大的CSS文件减肥，可是它在页面读取方面(尤为IE)仍是有弊端的。感兴趣的读者能够看看这篇文章:
《Don’t Use @import》

你还能够参考如下相关文章: