乐鱼电竞

    • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    UI培训之如何精简优化CSS代码？

    更新时间:2016年03月09日15时52分 来源:乐鱼播客UI培训学院 浏览次数:

    1.简化注释语句
    很多时候，为了增加可读性，开发人员会喜欢写多行注释，注释语句当然没有问题，但在 CSS 中他们会增大 CSS 文件的大�。Ω贸⑹约蚧�。
    这样在保持可读性的同时，减小了文件大小。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。

    2.简化颜色代码
    在 CSS 中，我们经常会跟十六进制颜色代码打交道。很多人可能习惯于写成以下的语法格式：
    color: #ffffff;
    color: #ff88ff;
    事实上，在 CSS 中是可以简化这个写法的，我们可以写成：
    color: #fff;
    color: #f8f;

    3.使用单行属性代替多行属性
    在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置，例如：
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
     我们可以写成：
    padding: 10px 0;
    对于其它缩写方法，可以参考网上一些资料。当然，我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习，它会给出具体提示。

    4.当值为 0 时可省略掉单位
    padding: 0;

    5.同时设定多个元素的属性
    例如：
    h1 {
        margin: 0;
        padding: 0;
    }
    h2 {
        margin: 0;
        padding: 0;
    }
    更赞的写法是这样：
    h1,h2 {
        margin: 0;
        padding: 0;
    }

    6.删除空白和换行
    这是个很不起眼的操作，但对于脱离了开发阶段，而要应用在网络上的 CSS 而言应该进行这样的处理，举个例子：
    h1  {
        margin: 0;
        padding: 0;
    }
    应该处理成：
    h1{margin:0;padding:0;}
    事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作。

    7.可删减的选择框架的样式库

    很多时候，我们在开发的过程中，为了提高效率会去选择框架或者组件快速的实现我们的效果，但是问题来了，这样直接引用的结果会导致很多样式的冗余，我们在使用的过程中并不会全部用到样式库里的样式，所以，我们应该尝试着去自定义框架或者组件的样式库，把没有调用到的样式删除以此来减小我们 CSS 文件的大小。


    本文版权归乐鱼播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
    作者：乐鱼播客UI培训学院
    首发：http://www.itcast.cn/ui 

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】