高效率撰写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-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 Code拷贝內容到剪贴板
  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 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.   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”连接点，随后再去做进1步的分辨：假如它的父连接点的 id 为“god”，则配对取得成功。由此可知，CSS 挑选器的配对远比大家想像的要慢的多，CSS 的特性难题不可忽略。

　　2.15 子孙后代挑选器

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

　　这个高效率比以前的“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 {background: url("/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-image: url(blah)}    
  2.   
  3. ------------>>>>>>>>    
  4.   
  5. #bookmark  {list-style-image: url(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.   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标准中特定了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 {background: url("images/shadow background.gif");}  

　　3.4 文档夹取名

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

images
assets
fonts

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

img
asset
font

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

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

　　提升后变成52字节，即10%的缩小：

CSS Code拷贝內容到剪贴板
  1. input {background: url(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" />  

 

为您推荐