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

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

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

使用工具

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

nav {  
    height40px;  
    width100%;  
    background#000;  
    border-bottom2px solid #fff;  
}  
nav ul {  
    padding0;  
    margin0 auto;  
}  
nav li {  
    displayinline;  
    floatleft;  
}  
nav a {  
    color#fff;  
    display: inline-block;  
    width100px;  
    text-shadow1px 1px 0px #000;  
}  
nav li a {  
    border-right1px solid #fff;  
    box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right0;  
}  
nav a:hover, nav a:active {  
    background-color#fff;  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

下面是结果。

nav a:hover, nav a:active {  
    background-color#fff;  
}  
nav {  
    height40px;  
    width100%;  
    background#000;  
    border-bottom2px solid #fff;  
    a {  
        color#fff;  
        display: inline-block;  
        width100px;  
        text-shadow1px 1px 0px #000;  
    }  
    ul {  
        padding0;  
        margin0 auto;  
    }  
    li:last-child {  
        a {  
            border-right0;  
        }  
    }  
    li {  
        displayinline;  
        floatleft;  
        a {  
            border-right1px solid #fff;  
            box-sizing:border-box;  
        }  
    }  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.

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

局限性

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

原文链接:http://www.cnblogs.com/58top/archive/2012/10/13/css-to-less.html

责任编辑:张伟 来源: 58分享的博客
相关推荐

2010-04-20 15:41:38

Oracle sql

2010-02-03 13:55:51

Python 代码

2024-02-22 10:27:00

Python开发

2011-07-06 08:46:30

2010-05-28 12:55:23

2010-03-16 14:41:06

Java Runnab

2010-03-12 17:35:00

Python字符串

2014-07-15 10:59:58

Spark代码跟读

2023-06-01 07:36:11

后端前端Java

2012-03-26 10:55:03

JavaJava EE

2023-10-04 18:29:24

NFS小文件业务

2020-04-06 14:50:43

MySQLSQL数据库

2010-03-16 10:32:36

Java线程拨号器

2010-09-17 15:36:24

2010-02-22 16:05:40

Python配置

2010-06-03 11:01:32

Hadoop安装部署

2013-01-28 10:11:24

敏捷设计敏捷开发

2017-07-28 11:31:59

iOS结构优化项目

2010-02-01 10:21:36

Python编码转换

2013-10-17 23:12:12

Windows 8.1Windows 8.1
点赞
收藏

51CTO技术栈公众号