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;
}

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

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

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

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

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

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