CSS选择符命名的几个原则

作者佚名技术来源 CSS技术浏览发布时间 2012-03-04

：

<ul class="top">
    <li>
         <div class="product">
            <h6>产品名称</h6>
            <ul>
                  <li>型号：XXX</li>
                  ...
            </ul>
         <div>
    </li>
</ul>

　　这下又傻眼了吧。只能用.top20 .product li {}去覆盖掉之前的样式。
　　我比较倾向的写法，是如 ul.top20 li.item这样写。（当然，CSS2准备了更多更精准的后代选择器，就犯不着这个了。等待IE8吧~~）

　　原则三：设计好一系列的“全局保留字”，以避免命名冲突

　　一些常用的单词，就不要用作特殊样式的名字。比如，我们会经常用到如下的选择符：

　　.tab li.current
　　或者
　　.nav li.current

　　以表示当前激活的标签或选项。很多样式都会用到“current”这个单词，为了避免彼此的样式冲突，有一个很简单的办法，就是人为商定，单纯的.current样式不作任何定义。换句话说，current这个名字只能出现在精确的后代选择符中。

　　类似的还有：

　　“.active”：和current差不多，有人也喜欢用这个
　　“.first”：经常在如“ 选项 | 选项 | 选项”的结构中用到
　　“.last”：在田字格布局中可能会用到
　　“.hover”：有时候需要用这个样式结合JS实现一些效果
　　“.text”、“.button”、“.submit”等：在属性选择器普及前，input标签的样式都靠它们了。

　　原则四：英文要正确

　　哎，这只能怪计算机是美国人发明的了。有时候会看到一些奇怪的选择符名。我解释一些常用单词的含义：

　　header，footer：
　　

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS3的border-radius属性定义HTML元素的圆角下一篇: 真正的利用DIV+CSS优化站点

关于CSS选择符命名的几个原则的所有评论

随机推荐