如何进行CSS代码减肥提升前端性能


随着越来越多的CSS预处理器的普及,一些新的工具和应用程序,基本上使得网页设计师或开发人员的开发工作更轻松,像这样的工具:CSS2Less。今天就分享一些这个工具的使用,css2less 是一个用 Ruby 开发的小工具用来将 css 转成 Less CSS 格式的文件。



使用工具


这个工具可以让我们自己的CSS代码输入后给CSS代码减肥。所以让我给它一个尝试。有一个文件要转换,下面是CSS代码。


  1. nav {  
  2.     height40px;  
  3.     width100%;  
  4.     background#000;  
  5.     border-bottom2px solid #fff;  
  6. }  
  7. nav ul {  
  8.     padding0;  
  9.     margin0 auto;  
  10. }  
  11. nav li {  
  12.     displayinline;  
  13.     floatleft;  
  14. }  
  15. nav a {  
  16.     color#fff;  
  17.     display: inline-block;  
  18.     width100px;  
  19.     text-shadow1px 1px 0px #000;  
  20. }  
  21. nav li a {  
  22.     border-right1px solid #fff;  
  23.     box-sizing:border-box;  
  24. }  
  25. nav li:last-child a {  
  26.     border-right0;  
  27. }  
  28. nav a:hover, nav a:active {  
  29.     background-color#fff;  

下面是结果。



  1. nav a:hover, nav a:active {  
  2.     background-color#fff;  
  3. }  
  4. nav {  
  5.     height40px;  
  6.     width100%;  
  7.     background#000;  
  8.     border-bottom2px solid #fff;  
  9.     a {  
  10.         color#fff;  
  11.         display: inline-block;  
  12.         width100px;  
  13.         text-shadow1px 1px 0px #000;  
  14.     }  
  15.     ul {  
  16.         padding0;  
  17.         margin0 auto;  
  18.     }  
  19.     li:last-child {  
  20.         a {  
  21.             border-right0;  
  22.         }  
  23.     }  
  24.     li {  
  25.         displayinline;  
  26.         floatleft;  
  27.         a {  
  28.             border-right1px solid #fff;  
  29.             box-sizing:border-box;  
  30.         }  
  31.     }  

正如我们可以在上面看到的那样,我们的老CSS代码被大量的减肥,剩下简写的方式了,这样的好处是减少服务器端的压力。


局限性


但是,我们也可以看到一些限制,转换结果。在旧的CSS,我们有几个相同的代码,2个关于边框的声明border-bottom: 2px solid #fff;和border-right: 1px solid #fff;我们只需要手动做其他的可能,直到解决上述限制。尽管目前仍然有限制,这个工具可以节省我们的时间,嵌套CSS规则集非常有帮助。




标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2