2013-04-24 15 views
4

在现代HTML编码,是受欢迎的几个类名添加到一个元件,如做不好有一个HTML元素很多类?

<div class="class1 class2 class3 class4 ..." 
</div> 

这给了我们一个不重复它们为不同类别的混合CSS属性有很大的灵活性。

逻辑上,浏览器消耗更多资源来收集不同类的CSS属性以应用于相应的元素。

由于难以在此基础上运行可靠的基准,所以我从理论的角度提出这个问题。想象一下,页面的大部分HTML元素都有几个类(例如10个类)。这是否使页面渲染更困难和更慢?这是放缓明智和相当?

一般来说,什么是浏览器的一般过程来读取不同类的属性?

+0

HTTP://webdesign.about .com/od/css/qt/tipcssmulticlas.htm – Morpheus 2013-04-24 07:31:21

+0

@Morpheus这个链接介绍了一般的可能性(实际上我也引用了这个问题)。浏览器渲染的性能没有评论。 – Googlebot 2013-04-24 07:38:17

+0

鉴于现代计算机的速度以及网页上的所有功能可能会使它们变慢,是否有理由期望类的数量会有任何可感知的效果?这个问题听起来是猜测性的,没有充分的理由去推测。 – 2013-04-24 07:38:46

回答

0

添加许多类的兴趣是为单独的样式设置单独的类,而不是为相同的用途重复/创建新的类。例如,如果我有一个按钮,我可以有3个类,如.btn .big .grey。如果我想创建另一个按钮,我只需要重复.btn类,并添加我的其他自定义类,如.medium.green。它被称为OOCSS(Oriented Object CSS)。

关于性能,我建议你看这个小例子http://www.css-101.org/descendant-selector/go_fetch_yourself.php,http://csswizardry.com/2011/09/writing-efficient-css-selectors,你可以找到很多关于ids和class的性能的文章。

+0

您的链接与CSS选择器以及后代选择器如何影响性能有关。我的问题是关于“个人课程”。 – Googlebot 2013-04-24 07:37:28

0

多个类可以更容易地向元素添加特殊效果,而无需为该元素创建全新的样式。例如,您可能希望能够快速向左或向右浮动元素。你可以用“float:left”来写两个“左”和“右”类。和“浮动:正确;”在他们中。然后,当你有一个元素,你需要左浮动则只需添加类“左”到它的类列表。

我喜欢在多个类中使用多个类,以便在整个站点上保持标准。例如,如果我总是希望得到10px的底部边距为具有底部利润率元素。通过创建仅包含botom-margin的类:10px;我可以将它添加到需要的地方。

缺点多类

虽然他们在主流浏览器都支持的,真的老的浏览器不支持他们。所以你应该确保你列出的第一个类是那个元素最具体的信息。

随着您对元素应用越来越多,多个类也会变得非常混乱。

More...

总结:

  • 减少选择器(包括IE相关风格的总数:.ie7 包含.foo。酒吧)
  • 避免通用选择器(包括不合格的属性选择: [TYPE = “URL”])
  • 页面缩放影响在某些浏览器(如Opera)CSS性能
  • 窗口大小会影响在某些浏览器CSS性能(例如镀铬)
  • 的页面重载可能产生负面影响在某些浏览器 (如Opera)
  • “边界半径” CSS性能和“改造”是最昂贵的房产 中(至少在WebKit的&歌剧)
  • 在基于WebKit的浏览器
  • “时间轴”标签可对总重计算 阐明/回流/重绘倍
  • 选择匹配是WebKit中快得多

http://perfectionkills.com/

相关问题