日期:2014-05-16  浏览次数:20699 次

请问下写css的时候,class层级过多会影响页面的渲染性能吗?
本帖最后由 cqheshuang 于 2014-03-12 16:03:04 编辑
随便举个例子, 比如:

<div class='first'>
     <div class='first-one'>
            <div class='first-two'>
                     <span class="first-span">
                           test
                           <small>small</small>
                      </span>
             </div>
      </div>
</div>


css:
.first .first-one .first-two { margin: 0px; }
.first .first-one .first-two .first-span  small { color: black; }    // 像这样的写法会有性能问题吗?

因为我不是搞前端的,我对这个问题一直很困扰。公司也没有专业写前端的,所以上来问问。
------解决方案--------------------
对于前端来讲,css注重的就是代码简洁,尽量缩短,代码过长,肯定影响加载速度


一般来说,写样式,最好不要超过3个以上的层级,只要能找到对应的标签设置样式即可.

另外,层级嵌套太多,对于其他人员 可读性太差 
------解决方案--------------------
理论上影响。但是可以忽略不计。写这么长主要是看着别扭。
------解决方案--------------------
基本上不会有这种情况!
重要的是是考虑可读性的问题!
------解决方案--------------------
会有性能问题. 但是少量使用不会有任何影响

CSS不难, 但是写好还是不容易的. 为了方便阅读与维护, 还有页面结构的逻辑关系, 需要良好的定义