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

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

使用工具

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

nav {  



    height: 40px;  




    width: 100%;  




    background: #000;  




    border-bottom: 2px solid #fff;  



}  


nav ul {  



    padding: 0;  




    margin: 0 auto;  



}  


nav li {  



    display: inline;  




    float: left;  



}  


nav a {  



    color: #fff;  




    display: inline-block;  




    width: 100px;  




    text-shadow: 1px 1px 0px #000;  



}  


nav li a {  



    border-right: 1px solid #fff;  



    box-sizing:border-box;  


}  


nav li:last-child a {  



    border-right: 0;  



}  


nav a:hover, nav a:active {  



    background-color: #fff;  



} 

下面是结果。

nav a:hover, nav a:active {  



    background-color: #fff;  



}  


nav {  



    height: 40px;  




    width: 100%;  




    background: #000;  




    border-bottom: 2px solid #fff;  



    a {  



        color: #fff;  




        display: inline-block;  




        width: 100px;  




        text-shadow: 1px 1px 0px #000;  



    }  


    ul {  



        padding: 0;  




        margin: 0 auto;  



    }  


    li:last-child {  


        a {  



            border-right: 0;  



        }  


    }  


    li {  



        display: inline;  




        float: left;  



        a {  



            border-right: 1px solid #fff;  



            box-sizing:border-box;  


        }  


    }  


} 

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

局限性