高效编写CSS代码的建议汇总

2020-05-02 08:16:42易采站长站整理

CSS Code复制内容到剪贴板

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

  2.23 尽量避免后代选择器

CSS Code复制内容到剪贴板

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复制内容到剪贴板

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

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

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

  3. 高级技巧

  3.1 省略嵌入资源的协议

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

CSS Code复制内容到剪贴板

<!– Not recommended –>   
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>   
  
<!– Recommended –>   
  
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>   
/* Not recommended */  
.example {   
  background: url(http://www.google.com/images/example);   
}   
  
/* Recommended */  
.example {   
  background: url(//www.google.com/images/example);   
}  

  3.2 省略可选的标签

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

XML/HTML Code复制内容到剪贴板

<!– Not recommended –>  
<!DOCTYPE html>  
<html>  
  <head>  
    <title>Spending money, spending bytes</title>  
  </head>  
  <body>  
    <p>Sic.</p>  
  </body>  
</html>  
  
<!– Recommended –>