我正在开发一个涉及大量客户端代码的项目.我们正在讨论css类和元素ID的命名约定,我很惊讶网上没有相关内容.
我注意到jquery ui使用一种约定,其中命名的样式被展平(比如ui-widgetname-classname- [subclassname]),而不是基于它们的层次结构命名这些类(.ui .widget .classname).我想这可以减少对DOM结构的依赖,但会创建极长的名称.
根据您的经验,您是否有命名css样式的样式指南？任何Dos和Donts以及要避免的陷阱？
期待您的回复
最佳答案
使用.ui-widget-classname而不是.ui .widget .classname是因为支持旧版浏览器(即IE6 / 7).虽然能够一次选择多个类将使您的CSS更易读和可维护,但IE6 / 7不会按预期运行.
例如,要定位该确切元素,您需要链接样式,如下所示：
.ui.widget.classname {
background: red;
}
将与IE6 / 7中的.classname匹配任何元素.像.ui-widget-classname这样的类为您提供了一个非常具体的目标选择器,代价是冗长.
另一种解决方案是嵌套div,如下所示：
在这种情况下,您的样式将适用于所有浏览器.
在这两个选项之间,我想jQuery UI选择使用单个div尽可能少地修改DOM,同时仍然提供方便的样式访问.
原文链接：https://www.f2er.com/css/427055.html