对于单个网页来说,css类名发生覆盖或冲突的几率比较小。对于包含多个网页的项目来说,经常需要给很多个类命名。这些类,刚开始可能是保存在本地样式表中,最终,不同网页的本地样式需要整合到一个独立的外部样式文件,供网页引用。如果类名较多,非常容易引起冲突、混乱或者互相覆盖。一旦发生覆盖或冲突,花在排查的时间上会巨多。为了解决这个问题,推荐在刚开始给不同网页命名时,先整体考虑命名规则、合理分配资源(名称),之后再给类命名,而不是一开始就急着给类命名。
具体命名规则不是一成不变的,但是个人认为,如果先按大类区分、把大类的名称放在每个类的开头,这样会避免混乱和冲突,也省不少时间。比如,假设项目网页分3类,第一类是用于地球的,第二类是应用于月球的,第三类是应用于火星的,那么用于地球的若干网页的类名可冠以earth,用于月球若干网页的类名可冠以moon,用于火星若干网页的类名可冠以mars,然后再加一个横杆(dash), 再进行具体的类名义或者再加入下一级的分类标识后再给类加具体名称。
再具体一点,对于月球网页的框架可命名为moon-panel或moon-container,或根据具体情形用其他合适的名称;而对于用于月球网页的搜索按键的类命名,可命名为:moon-search-btn。其他可以此类推。
这种命名方式虽然看起来比较笨拙,但是对于有大量类名的样式文档来说,其实越往后越轻松。相反,如果随心所欲地给类命名,虽然开始时对于某些类可能会比较容易,类名也简洁,但随着类名的增加就会感到后面的类命名会力不从心,也容易造成命名重叠而引发覆盖或者混乱。因此,推荐用以上的类命名方法写类名。