Question

您需要浮动一堆元素的示例。

选项1 - 链元素

#elm1, #elm2, #elm3, #elm4 {float:left}

选项2 - 向元素添加类似的类

.float {float:left}

选项3 - 单独为班级添加风格

#elm1{float:left}
#elm2{float:left}
#elm3{float:left}
#elm4{float:left}

我更喜欢1，但我不知道它有多大的速度影响，还有其他选择吗？这是什么惯例？

Answer 1

http://css-tricks.com/efficiently-rendering-css/似乎说ID是最有效的，虽然恕我直言，我认为这个课程更清晰，更准确地代表你想要表达的内容。

来自Google的文章@ http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

“避免使用通用密钥选择器。允许元素从祖先继承，或使用类将样式应用于多个元素。“

所以，我认为最佳实践说使用课程。它干净，可读恕我直言。

Answer 2

对全局案例使用选项二（类）。这就是阶级选择者应该做的事情。

使用ID来设置特定差异的样式。这就是ID选择器的目的。

    .myclass {
       float:left;
       height:10px; 
    }

   #elem2 {
     height:69px;
     color:#ABCDEF;
   }

Answer 3

css的全部目的是从演示文稿中释放html。因此，语义方法总是很好的。

如果您使用.float { float:left }，您也可以使用style="float:left" ...（好吧这是一个夸张，但关键是您使用的样式类越少，表示和信息之间的分离越好）

如前所述，最好的方法是在语义上识别和分类您的html代码，然后使用DOM关系

#elements {
   float:left;
}
   #elements li {
      color:#ABCDEF
   }
   #elements li.odd {
      color:#123456
   }

Answer 4

大多数CSS缩小器和“清洁器”都会做你的第一个选择。在我看来，它比创建一个新类更好地添加到一堆元素只是为了风格，它比你的上一个选项好一百万倍。

在CSS中，如果它已经有ID或类，您可以对其应用样式。因此，将选项1与选项2进行比较，选项1应该是您更好的选择。您不必返回代码并将类添加到已经具有ID的元素中，并且您不必在样式表中的同一元素的ID和类之间使用样式。

Answer 5

就速度而言，我不认为3种选择之间存在太大差异。我认为这更像是一个可维护性问题。似乎选项1最容易维护选项，所以这可能是我想要的。

Answer 6

涉及某些权衡。通常，任何基于ID的东西都被认为更快，特别是当页面变得更重时。另一方面，http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/和类似的文章作者认为，使用通用规则的类是有意义的，应该使用。速度差异通常可以忽略不计，精心使用的类使维护和更新设计变得更加简单。

设置CSS样式的更好方法是什么？

6 个答案: