zoukankan      html  css  js  c++  java
  • 高效CSS写法

    上周末翻译了molliza 和google关于高效CSS 的写法的文章,觉得他们的说法有一些共同之处,就是CSS解析引擎是从右到左开始解析的,我们要做的就是减少CSS

    引擎的解析时间,所以避免一些低效的CSS 选择器去匹配大量元素能够减少页面加载的时间。结合我自己编写CSS的经验,我总结如下:

    1) CSS 的层级选择器不要超过3个,保持3个以内

    bad case: .class1 ul li a{}

    good case .class a{}

    2) 尽量少使用标签选择器,但是也是可以使用的,比如写列表(ul li语法)的时候,如果给每个li一个class,那样相反不仅代码难看,而且也无疑的增加了代码

    复杂度,很难维护,总之,在于自己权衡这个点就是了。

    3) 使用一些有代表意义的单词,比如我在模块化开发的过程中,我一般用mod-xxx,在这里模块中我写的CSS都在这个里面包含,很利于维护,代码也很漂亮,

    不会超过3层的包含关系。也不用过多的考虑同名的问题。

    4)不要早id前面添加任何限定符,包括class tag 或者其他的选择符。

    bad case: .class #id{}   div#id{}这2个都是不推荐的

    good case: #id{}推荐的做的

    5)不要再class 前面使用标签限定符,除非你是想给不同的标签定义多个class ,那么只有这样用了。

    bad case: div.class{}

    good case :.class{} 

       另外: div.class{} span.class{} 这样那就这样吧。。

    6) 使用class 来代替层级关系,如果发现要写很多的层级关系才能表达意义的时候,那么放弃吧。干脆写一个class 来替代这个解决方案。例如

    bad case: #id .class1 ul li a{}

    good case .class2{} 

    将这个class2直接加在a标签上。

    请各位大侠拍砖。谢谢。 

  • 相关阅读:
    poj 1456 贪心+STL
    hdu 4283 区间dp
    hdu 4745 区间dp
    hdu 3652 数位dp
    poj 2955 区间dp
    ubuntu apache2配置详解(含虚拟主机配置方法)
    从 mysql 客户端导出数据库 mysqldump
    Git 版本回退问题详解
    SEO 外链 内链 的定义
    为项目编写Readme.MD文件
  • 原文地址:https://www.cnblogs.com/yupeng/p/2013258.html
Copyright © 2011-2022 走看看