记住CSS类和ID中的html标记是否好主意？

例如：

#divMainContentBody { … } 

.spanImportant { … }

这最大限度地减少需要你的样式表和您的标记之间切换，因为ID和类已经告诉你什么元素类型，它指。

后@更新Guffa的回答是：

alt text

我发现这个提醒在this book也http://answers.oreilly.com/topic/647-how-to-write-efficient-css-selectors/

不符合ID选择
Because there is only one element in the page with a given ID, there’s 
无需添加其他限定符。例如，DIV #toc不必要，应简化为#toc。

不符合类选择
Instead of qualifying class selectors for specific tags, extend 
类名是特定于使用情况。例如，将LI .chapter更改为.li-chapter，或更好地更改，然后更改.list-chapter。

来源

2010-04-17 Jitendra Vyas

其中的前缀标识符被称为hungarian notation，用于被认为对其使用至关重要的标识符的方面。

在大多数情况下，我不认为元素类型足够重要，以便将其放入CSS中的标识符中。如果名字选择得当，你应该已经能够确定他们的重要信息。

如果元素很重要，可以在选择器中使用它，而不是将其放入标识符中。这样的选择实际上只与单元工作：

div#MainContentBody { ... } 

span.Important { ... }

来源

2010-04-17 10:48:46 Guffa

+1完全同意，并且它保留OP要在CSS文件中保留的语义信息。 – 2010-04-17 10:49:41

这是一个小细节，但span.Important和.spanImportant不一样：这些规则有不同的重量，所以如果你想覆盖它们，你必须考虑到这一点，并且浏览器的性能也是不同的，因为在一种情况下，它会搜索具有一个类的所有元素，然后在第一个元素中验证什么是节点名称。这些只是小细节，但第一个可能会导致一些意想不到的后果，由于这种小的变化。 – AlfonsoML 2010-04-17 11:10:43

@Guffa - 查看我更新的问题 – 2010-04-17 11:11:43

在我看来，这未必是因为使用与位置相关的样式或向基于位置的图案“趋势”你的CSS的最佳实践（即“这只能用于跨度”，“这只适用于div”）迫使您在HTML元素和CSS类之间创建1：1关系。

CSS类的名称很合适，因为 - 就像在OO编程中一样 - 您可以让CSS类相互继承。为此，你更好的方法是保持一个有意义的命名约定（正如你已经建议的那样），但是编写模块化并且可以扩展的类。

这样做的结果是，您可以在各种不同的方式和场所中使用一个类，而无需不断地重写样式表中的行为。这样可以让您的样式更具可预测性，并且您的CSS更易于维护。

在http://wiki.github.com/stubbornella/oocss或上阅读更多关于它的内容。

来源

2010-04-17 10:51:05

记住CSS类和ID中的html标记是否好主意？

回答

相关问题