css命名约定讨论(jqueryui)

Question

我正在开发一个涉及大量客户端代码的项目.我们正在讨论css类和元素ID的命名约定,我很惊讶网上没有相关内容.

我注意到jquery ui使用一种约定,其中命名的样式被展平(比如ui-widgetname-classname- [subclassname]),而不是基于它们的层次结构命名这些类(.ui .widget .classname).我想这可以减少对DOM结构的依赖,但会创建极长的名称.

根据您的经验,您是否有命名css样式的样式指南？任何Dos和Donts以及要避免的陷阱？

期待您的回复

Answer 1

使用.ui-widget-classname而不是.ui .widget .classname因为支持旧版浏览器（即 IE6/7）。虽然能够一次选择多个类将使您的 CSS 更具可读性和可维护性，但 IE6/7 不会按预期运行。

例如，要定位该确切元素，您需要像这样链接样式：

.ui.widget.classname {
  background: red;
}

将匹配.classnameIE6/7 中的任何元素。像这样的类为.ui-widget-classname您提供了一个非常具体的目标选择器，但代价是冗长。

另一个解决方案是嵌套divs，如下所示：

<div class="ui">
  <div class="widget">
    <div class="classname">
    </div>
  </div>
</div>

.ui .widget .classname {
  background: red;
}

在这种情况下，您的样式将适用于所有浏览器。

在这两个选项之间，我想 jQuery UI 选择尽可能少地修改 DOM，div同时仍然提供轻松的样式访问。