高效率撰写CSS编码的提议汇总

2021-01-20 07:35 jianzhan

1. 基础标准

  1.1 把CSS放在HTML网页页面头顶部

  因为访问器必须在全部的款式表载入进行后才可以刚开始3D渲染网页页面,款式表载入进行以前网页页面会1直显示信息空白,因而必须将款式表放在头顶部。

  @import 非常于把 标识放在网页页面的底部,因而从提升特性的角度考虑到,应防止应用 @import。

  1.2 防止应用 CSS Expressions

  Expression 仅有 IE 适用,并且他的实行比大多数数人想像的要经常的多。不但网页页面3D渲染和更改尺寸 (resize) 时会实行,网页页面翻转 (scroll) 时也会实行,乃至连电脑鼠标在网页页面上拖动时都会实行。在 expression 里边再加1个计数器就会了解,expression 的实行上非常经常的。电脑鼠标的翻转很非常容易就会使 expression 的实行次数超出 10000。

  1.3 CSS简写

  1.3.1 16进制色调值简写

CSS Code拷贝內容到剪贴板
  1. /* Not recommended */  
  2. color#eebbcc;   
  3.   
  4. /* Recommended */  
  5. color#ebc;     

  1.3.2 特性值简写

 

CSS Code拷贝內容到剪贴板
  1. margin-top2px;   
  2.  margin-right5px;   
  3.  margin-bottom: 2em;   
  4.  margin-left15px;     ----->>     margin2px 5px 2em 15px;    
  5.   
  6.  border-width1px;   
  7.  border-stylesolid;   
  8.  border-color#000     ----->>     border1px solid #000    
  9.   
  10.  font-styleitalic;   
  11.  font-variantsmall-caps;   
  12.  font-weightbold;   
  13.  font-size: 1em;   
  14.  line-height: 140%;   
  15.  font-familysans-serif;  ----->>  fontitalic small-caps bold 1em 140% sans-serief    
  16.   
  17.  background-color#f00;   
  18.  background-imageurl(background.gif);   
  19.  background-repeatno-repeat;   
  20.  background-attachmentfixed;   
  21.  background-position: 0 0;   ----->>background#f00 url(background.gif) no-repeat fixed 0 0    
  22.   
  23.  list-style-typesquare;   
  24.  list-style-positioninside;   
  25.  list-style-imageurl(image.gif)  ----->> list-stylesquare inside url(image.gif)   

  1.4 尽可能抽取类似一部分

CSS Code拷贝內容到剪贴板
  1. .class1{positionabsoluteleft20pxtop30px;}   
  2. .class2{positionabsoluteleft20pxtop30px;}   
  3. .class3{positionabsoluteleft20pxtop30px;}   
  4. .class4{positionabsoluteleft20pxtop30px;}   
  5. .class5{positionabsoluteleft20pxtop30px;}   
  6. .class6{positionabsoluteleft20pxtop30px;}    
  7.   
  8.  -------------------->>>>>>>    
  9.   
  10.  .class1 .class2 .class3 .class4 .class5 .class6{   
  11.         Position: absoluteleft20pxtop20px;   
  12.  }  

  2. 重要关键点

  2.1 只应用小写

CSS Code拷贝內容到剪贴板
  1. <!-- Not recommended -->   
  2. <A HREF="/">Home</A>   
  3.   
  4. <!-- Recommended -->   
  5. <img src="google.png" alt="Google">  

  2.2 不必有过剩的空格(划线处)

CSS Code拷贝內容到剪贴板
  1. <!-- Not recommended -->   
  2. <p>What?_   
  3.   
  4. <!-- Recommended -->   
  5. <p>Yes please.  

  2.3 应用utf8编号

html中:

XML/HTML Code拷贝內容到剪贴板
  1. <meta charset="utf⑻">   

css中:

CSS Code拷贝內容到剪贴板
  1. @charset "utf⑻";  

  2.4 应用html5文本文档种类

  

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  

  2.5 认证HTML与CSS文本文档

  认证HTML

  认证CSS

  2.6 使文本文档词义化

  2.7 多新闻媒体(多终端设备)适配

CSS Code拷贝內容到剪贴板
  1. <!-- Not recommended -->   
  2. <img src="spreadsheet.png">   
  3.   
  4. <!-- Recommended -->   
  5. <img src="spreadsheet.png" alt="Spreadsheet screenshot.">  

  2.8 不必应用实体线引入

CSS Code拷贝內容到剪贴板
  1. <!-- Not recommended -->   
  2. The currency symbol for the Euro is “&eur;”.   
  3.   
  4. <!-- Recommended -->   
  5. The currency symbol for the Euro is “€”.  

  2.9 应用带有词义的id和class

CSS Code拷贝內容到剪贴板
  1. /* Not recommended: meaningless */  
  2. #yee⑴901 {}   
  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 为结尾的申明加上分号

  虽然省略结尾分号能够省略1个字节,可是十分不好于精英团队维护保养,因小失大

CSS Code拷贝內容到剪贴板
  1. /* Not recommended */  
  2. .test {   
  3.   displayblock;   
  4.   height100px  
  5. }   
  6.   
  7. /* Recommended */  
  8. .test {   
  9.   displayblock;   
  10.   height100px;   
  11. }  

  2.14 挑选器的高效率

  访问器是“从右往左”来剖析 class 的,针对下面的标准

CSS Code拷贝內容到剪贴板
  1. #god > li {font-weightbold}  

  访问器会先搜索网页页面上全部的“li”连接点,随后再去做进1步的分辨:假如它的父连接点的 id 为“god”,则配对取得成功。由此可知,CSS 挑选器的配对远比大家想像的要慢的多,CSS 的特性难题不可忽略。

  2.15 子孙后代挑选器

CSS Code拷贝內容到剪贴板
  1. #toc li {font-weightbold}   

  这个高效率比以前的“child selector”高效率更慢,并且要慢许多。访问器先便捷全部的“li”连接点,随后步步上溯其父连接点,直至 DOM 构造的根连接点(document),假如有某个连接点的 id 为“toc”,则配对取得成功,不然再次搜索下1个“li”连接点。

  2.16 尽可能防止全局性挑选器

CSS Code拷贝內容到剪贴板
  1. [hidden="true"] { ... } /* A universal rule */    

  这里的配对标准很显著:搜索网页页面上的全部连接点,假如有连接点存在“hidden”特性,而且其特性值为“true”,则配对取得成功。这是最耗时耗力的配对,网页页面上的全部连接点都必须开展配对运算,这类标准应尽可能防止。

  是用星号也1样

CSS Code拷贝內容到剪贴板
  1. #god li *  

  先寻找网页页面上的全部元素,再配对先祖中包括li的元素,随后在这些元素中再搜索父元素的id为god的元素。

  因而,针对全局性挑选器,只提议1种用法:

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 在全局性范畴内来说应当是唯1的,用唯1的 Class 名字来精准定位1个连接点常常比组成精准定位更为便捷。客观事实上,这类做法还可以防止因为开发设计改动网页页面元素的种类(Tag)而致使的款式无效的状况,保证款式与元素的分离出来,二者单独维护保养。

  2.19 尽可能降低标准数量

  能够考虑到将等级关联写到1个class中,但是在等级变化时就较为不便了

CSS Code拷贝內容到剪贴板
  1. Span[mailfolder="true"] > table > tr > td.columnClass {...}    
  2.   
  3. ------------------->>>>>>>    
  4.   
  5. .span-mailfolder-tbl-tdCol {...}   

  2.20 防止太长的class取名

  能够考虑到缩写

CSS Code拷贝內容到剪贴板
  1. ocHeroImage   
  2. ocEmailAddress  

  假如感觉无法了解,能够添加连标识符或注解

CSS Code拷贝內容到剪贴板
  1. oc-HeroImage   
  2. oc-EmailAddress  

  虽然有词义化层面的考虑到,但取名還是尽可能短1些,要是易于分辨便可

CSS Code拷贝內容到剪贴板
  1. heroImg   
  2. emailAddr  

  2.21 文档名中不可有时间格

  a) 有时间格的文档名会被Google当做两个重要字,将会带来更多的检索結果,引来更多总流量,是好事儿

  b) 有时间格代表着不可以省略引号,多了两个字节

  c) 空格会被访问器全自动变换为%20,老的访问器将会不适用,假如将%20硬编号到URL中则每一个案例中都多了两个标识符

CSS Code拷贝內容到剪贴板
  1. input {backgroundurl("/images/shadow background.gif");}  

  2.22 省略URI的引号

CSS Code拷贝內容到剪贴板
  1. @import url(//www.google.com/css/go.css);  

  2.23 尽可能防止子孙后代挑选器

CSS Code拷贝內容到剪贴板
  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 Code拷贝內容到剪贴板
  1. #bookmark  > .menu-left {list-style-imageurl(blah)}    
  2.   
  3. ------------>>>>>>>>    
  4.   
  5. #bookmark  {list-style-imageurl(blah)}   

  2.25 公布以前1定要开展缩小

  可以使用YUI Compressor或相近手机软件开展缩小后再公布。

  3. 高級技能

  3.1 省略嵌入資源的协议书

  便可防止混和內容难题(mixed content issues)还可以缩减文档尺寸

CSS Code拷贝內容到剪贴板
  1. <!-- Not recommended -->   
  2. <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>   
  3.   
  4. <!-- Recommended -->   
  5.   
  6. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>   
  7. /* Not recommended */  
  8. .example {   
  9.   backgroundurl(http://www.google.com/images/example);   
  10. }   
  11.   
  12. /* Recommended */  
  13. .example {   
  14.   backgroundurl(//www.google.com/images/example);   
  15. }  

  3.2 省略可选的标识

  HTML5标准中特定了1些能够省略的标识,能够缩减文档尺寸

XML/HTML Code拷贝內容到剪贴板
  1. <!-- Not recommended -->  
  2. <!DOCTYPE html>  
  3. <html>  
  4.   <head>  
  5.     <title>Spending money, spending bytes</title>  
  6.   </head>  
  7.   <body>  
  8.     <p>Sic.</p>  
  9.   </body>  
  10. </html>  
  11.   
  12. <!-- Recommended -->  
  13. <!DOCTYPE html>  
  14. <title>Saving money, saving bytes</title>  
  15. <p>Qed.  

  3.3 文档构造

  因为图象等資源1般仅有CSS文档应用,故可将图象文档夹放到CSS文档同级文件目录,这样便可应用相对性相对路径,节约字节数

CSS Code拷贝內容到剪贴板
  1. input {backgroundurl("images/shadow background.gif");}  

  3.4 文档夹取名

  一般文档夹会被取名为其所意味着的資源的复数方式

images
assets
fonts

  实际上大可无须,应用奇数方式能够节约很多字节,特别是当每一个新项目的构造都相近时

img
asset
font

  针对下面1段包括58字节的编码:

CSS Code拷贝內容到剪贴板
  1. input {backgroundurl("/images/shadow background.gif");}  

  提升后变成52字节,即10%的缩小:

CSS Code拷贝內容到剪贴板
  1. input {backgroundurl(img/shadow-background.gif);}  

  假如在应用缩写,则可进1步缩减:

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

  假如1个新项目有几百行这样的编码,那末就会节约几百字节了。假如站点浏览量超大,则可节约数目客观性的带宽資源。

  3.5 结尾申明的分号

  前面提过,去掉结尾申明的分号能够节约字节,但不好于维护保养。能够考虑到在缩小公布环节去掉。

CSS Code拷贝內容到剪贴板
  1. .clear {clear:both;}   
  2.   
  3. .clear {clear:both}  

  3.6 情况色简写

  情况色简写也可节约字节,但要慎用,由于省略掉的默认设置特性会遮盖前面的特性。

  3.7 滤镜简写

CSS Code拷贝內容到剪贴板
  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 Code拷贝內容到剪贴板
  1. selector {   
  2.         -ms-filter:"alpha(opacity=65)";   
  3.         filter:alpha(opacity=65);   
  4. }   

  因为YUI的普遍应用极为小区开发设计着的强劲能量,表明这类写法早已是历经深层检测的写法,能够安心应用。

  3.8 Gzip缩小与CSS撰写

  Goolge提议依照字母次序撰写CSS标准,便捷维护保养。别的企业也是有自身的标准。从Gzip缩小角度,要是全部文本文档中的撰写次序维持1致便可,能够提升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 Code拷贝內容到剪贴板
  1. <link rel="stylesheet" href="http://css.somedomain.com/reset.css" type="text/css" />  
  2. <link rel="stylesheet" href="http://css.somedomain.com/global.css" type="text/css" />  
  3. <link rel="stylesheet" href="http://css.somedomain.com/home.css" type="text/css" />