如何进行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代码被大量的减肥,剩下简写的方式了,这样的好处是减少服务器端的压力。
局限性