高效编写CSS代码的建议有哪些

这篇文章将为大家详细讲解有关高效编写CSS代码的建议有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

站在用户的角度思考问题,与客户深入沟通,找到吴中网站设计与吴中网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网络空间、企业邮箱。业务覆盖吴中地区。

1. 基本原则

1.1 把CSS放在HTML页面头部

由于浏览器需要在所有的样式表加载完成后才能开始渲染页面,样式表加载完成之前页面会一直显示空白,因此需要将样式表放在头部。

@import 相当于把 标签放在页面的底部,因此从优化性能的角度考虑,应避免使用 @import。

1.2 避免使用 CSS Expressions

Expression 只有 IE 支持,而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行,页面滚动 (scroll) 时也会执行,甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道,expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

1.3 CSS简写

1.3.1 16进制颜色值简写

CSS 

  1. /* Not recommended */  

  2. color: #eebbcc;   

  3.   

  4. /* Recommended */  

  5. color: #ebc;     

1.3.2 属性值简写

CSS 

  1. margin-top: 2px;   

  2.  margin-right: 5px;   

  3.  margin-bottom: 2em;   

  4.  margin-left: 15px;     ----->>     margin: 2px 5px 2em 15px;    

  5.   

  6.  border-width: 1px;   

  7.  border-style: solid;   

  8.  border-color: #000     ----->>     border: 1px solid #000    

  9.   

  10.  font-style: italic;   

  11.  font-variant: small-caps;   

  12.  font-weight: bold;   

  13.  font-size: 1em;   

  14.  line-height: 140%;   

  15.  font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief    

  16.   

  17.  background-color: #f00;   

  18.  background-image: url(background.gif);   

  19.  background-repeat: no-repeat;   

  20.  background-attachment: fixed;   

  21.  background-position: 0 0;   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0    

  22.   

  23.  list-style-type: square;   

  24.  list-style-position: inside;   

  25.  list-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)   

1.4 尽量抽取相似部分

CSS 

  1. .class1{position: absolute; left: 20px; top: 30px;}   

  2. .class2{position: absolute; left: 20px; top: 30px;}   

  3. .class3{position: absolute; left: 20px; top: 30px;}   

  4. .class4{position: absolute; left: 20px; top: 30px;}   

  5. .class5{position: absolute; left: 20px; top: 30px;}   

  6. .class6{position: absolute; left: 20px; top: 30px;}    

  7.   

  8.  -------------------->>>>>>>    

  9.   

  10.  .class1 .class2 .class3 .class4 .class5 .class6{   

  11.         Position: absolute; left: 20px; top: 20px;   

  12.  }  

  2. 关键要点

2.1 只使用小写

CSS 

  1.   

  2. Home   

  3.   

  4.   

  5.   

2.2 不要有多余的空格(划线处)

CSS 

  1.   

  2. What?_   

  3.   

  4.   

  5. Yes please.  

2.3 使用utf8编码

html中:

XML/HTML 

  1.    

css中:

CSS 

  1. @charset "utf-8";  

2.4 使用html5文档类型

XML/HTML 

  1.   

2.5 验证HTML与CSS文档

验证HTML

验证CSS

2.6 使文档语义化

2.7 多媒体(多终端)兼容

CSS Code

  1.   

  2.   

  3.   

  4.   

  5.   

2.8 不要使用实体引用

CSS Code

  1.   

  2. The currency symbol for the Euro is “&eur;”.   

  3.   

  4.   

  5. The currency symbol for the Euro is “€”.  

2.9 使用带有语义的id和class

CSS Code

  1. /* Not recommended: meaningless */  

  2. #yee-1901 {}   

  3.   

  4. /* Not recommended: presentational */  

  5. .button-green {}   

  6. .clear {}   

  7.   

  8. /* Recommended: specific */  

  9. #gallery {}   

  10. #login {}   

  11. .video {}   

  12.   

  13. /* Recommended: generic */  

  14. .aux {}   

  15. .alt {}  

2.10 省略零值的单位

CSS Code

  1. margin: 0;   

  2. padding: 0;  

2.11 省略起始的零

CSS Code

  1. font-size: .8em;  

2.12 尽量避免CSS hacks

尝试换种解决方案

2.13 为末尾的声明添加分号

尽管省略末尾分号可以省略一个字节,但是非常不利于团队维护,得不偿失

CSS Code

  1. /* Not recommended */  

  2. .test {   

  3.   display: block;   

  4.   height: 100px  

  5. }   

  6.   

  7. /* Recommended */  

  8. .test {   

  9.   display: block;   

  10.   height: 100px;   

  11. }  

2.14 选择器的效率

浏览器是“从右往左”来分析 class 的,对于下面的规则

CSS Code

  1. #god > li {font-weight: bold}  

浏览器会先查找页面上所有的“li”节点,然后再去做进一步的判断:如果它的父节点的 id 为“god”,则匹配成功。由此可知,CSS 选择器的匹配远比我们想象的要慢的多,CSS 的性能问题不容忽视。

2.15 后代选择器

CSS Code

  1. #toc li {font-weight: bold}   

这个效率比之前的“child selector”效率更慢,而且要慢很多。浏览器先便利所有的“li”节点,然后步步上溯其父节点,直到 DOM 结构的根节点(document),如果有某个节点的 id 为“toc”,则匹配成功,否则继续查找下一个“li”节点。

2.16 尽量避免全局选择器

CSS Code

  1. [hidden="true"] { ... } /* A universal rule */    

这里的匹配规则很明显:查找页面上的所有节点,如果有节点存在“hidden”属性,并且其属性值为“true”,则匹配成功。这是最耗时耗力的匹配,页面上的所有节点都需要进行匹配运算,这种规则应尽量避免。

是用星号也一样

CSS Code

  1. #god li *  

先找到页面上的所有元素,再匹配祖先中包含li的元素,然后在这些元素中再查找父元素的id为god的元素。

因此,对于全局选择器,只建议一种用法:

CSS Code

  1. * { margin: 0; padding: 0; /* etc. */ }  

2.17 避免tag+id或者class+id

CSS Code

  1. button#goButton {...};----->>#goButton   

  2. .fundation#testIcon {...};----->>#testIcon   

2.18 关于tag+class

CSS Code

  1. button.indented {...}----->>.button-indented {...}   

程序员们经常会给某个 Class 前面加上标签名称(Tag Name),以更精确且快速的定位该节点,但是这样往往效率更差。因为页面上的 class 在全局范围内来讲应该是唯一的,用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上,这种做法也可以避免由于开发修改页面元素的类型(Tag)而导致的样式失效的情况,做到样式与元素的分离,两者独立维护。

2.19 尽量减少规则数量

可以考虑将层级关系写到一个class中,不过在层级变动时就比较麻烦了

CSS Code

  1. Span[mailfolder="true"] > table > tr > td.columnClass {...}    

  2.   

  3. ------------------->>>>>>>    

  4.   

  5. .span-mailfolder-tbl-tdCol {...}   

2.20 避免过长的class命名

可以考虑缩写

CSS 

  1. ocHeroImage   

  2. ocEmailAddress  

如果觉得难以理解,可以加入连字符或注释

CSS 

  1. oc-HeroImage   

  2. oc-EmailAddress  

尽管有语义化方面的考虑,但命名还是尽量短一些,只要易于辨认即可

CSS 

  1. heroImg   

  2. emailAddr  

2.21 文件名中不应有空格

a) 有空格的文件名会被Google当成两个关键字,可能带来更多的搜索结果,引来更多流量,是好事

b) 有空格意味着不能省略引号,多了两个字节

c) 空格会被浏览器自动转换为%20,老的浏览器可能不支持,如果将%20硬编码到URL中则每个实例中都多了两个字符

CSS Code复制内容到剪贴板

  1. input {background: url("/images/shadow background.gif");}  

2.22 省略URI的引号

CSS 

  1. @import url(//www.google.com/css/go.css);  

2.23 尽量避免后代选择器

CSS 

  1. treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}   

Descendant 选择器是耗时相对高的选择器,通常来讲,它在 CSS 里的使用应该是尽量避免的,如果能用 child 选择器替代就应该尽量这样去做。

2.24 充分利用继承机制

 Color
 font
 letter-spacing
 line-height
 list-style
 text-align
 text-indent
 text-transform
 white-space
 word-spacing

CSS

  1. #bookmark  > .menu-left {list-style-image: url(blah)}    

  2.   

  3. ------------>>>>>>>>    

  4.   

  5. #bookmark  {list-style-image: url(blah)}   

2.25 发布之前一定要进行压缩

可使用YUI Compressor或类似软件进行压缩后再发布。

  3. 高级技巧

3.1 省略嵌入资源的协议

即可避免混合内容问题(mixed content issues)也可以缩减文件大小

CSS 

  1.   

  2.   

  3.   

  4.   

  5.   

  6.   

  7. /* Not recommended */  

  8. .example {   

  9.   background: url(http://www.google.com/images/example);   

  10. }   

  11.   

  12. /* Recommended */  

  13. .example {   

  14.   background: url(//www.google.com/images/example);   

  15. }  

3.2 省略可选的标签

HTML5规范中指定了一些可以省略的标签,可以缩减文件大小

XML/HTML 

  1.   

  2.   

  3.   

  4.     

  5.     Spending money, spending bytes  

  6.     

  7.     

  8.     

    Sic.

      

  9.     

  10.   

  11.   

  12.   

  13.   

  14. Saving money, saving bytes  

  15. Qed.  

3.3 文件结构

由于图像等资源一般只有CSS文件使用,故可将图像文件夹放到CSS文件同级目录,这样就可使用相对路径,节省字节数

CSS 

  1. input {background: url("images/shadow background.gif");}  

3.4 文件夹命名

通常文件夹会被命名为其所代表的资源的复数形式

images
assets
fonts

其实大可不必,使用单数形式可以节省许多字节,尤其是当每个项目的结构都类似时

img
asset
font

对于下面一段包含58字节的代码:

CSS 

  1. input {background: url("/images/shadow background.gif");}  

优化后变为52字节,即10%的压缩:

CSS

  1. input {background: url(img/shadow-background.gif);}  

如果在使用缩写,则可进一步缩减:

input {background: url(img/shadow-bg.gif);}

如果一个项目有几百行这样的代码,那么就会节省几百字节了。如果站点访问量超大,则可节省数目客观的带宽资源。

3.5 末尾声明的分号

前面提过,去掉末尾声明的分号可以节省字节,但不利于维护。可以考虑在压缩发布阶段去掉。

CSS板

  1. .clear {clear:both;}   

  2.   

  3. .clear {clear:both}  

3.6 背景色简写

背景色简写也可节省字节,但要慎用,因为省略掉的默认属性会覆盖前面的属性。

3.7 滤镜简写

CSS 

  1. selector {   

  2.         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";   

  3.         filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);   

  4. }  

filter的版本是IE8以下的,–ms-filter的版本是IE9以上的,YUI会将其压缩为:

CSS 

  1. selector {   

  2.         -ms-filter:"alpha(opacity=65)";   

  3.         filter:alpha(opacity=65);   

  4. }   

由于YUI的广泛使用极其社区开发着的强大力量,说明这种写法已经是经过深度测试的写法,可以放心使用。

3.8 Gzip压缩与CSS书写

Goolge建议按照字母顺序书写CSS规则,方便维护。其他公司也有自己的规范。从Gzip压缩角度,只要整个文档中的书写顺序保持一致即可,可以提高Gzip压缩比率。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

3.9 更少的请求比更小的尺寸重要

文件可以适当的合并,只保留基本的层级即可

XML/HTML 

  1.   

  2.   

  3.   

关于高效编写CSS代码的建议有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前文章:高效编写CSS代码的建议有哪些
网站地址:http://myzitong.com/article/jipoip.html