关于css的class命名中下划线的讨论

【前言】

   之前有同学查到class命名尽量不要用下划线，建议用横线-，或者用驼峰命名法。

   网上给的解释是：避免css属性名和值混合；另外IE6中不支持_开头的类名，例如_top这种不支持。

   为了检验真实性便去网上查了下，以下为笔录

 

【主体】

   （1）关于下划线，XHTML区分大小写，xhtml要求 标签名 属性名 值都要小写，并且要有双引号和 标签闭合 css 元素名称以及id和类名的命名也是区分大小写的（但是属性和值不区分），尽量小写，可以用-连字符，尽量不要用_下划线做连字符(IE6下_和-均失效) javascript 的变量和其他语法元素名都是区分大小写的，变量命名不允许有空格或者其他标点符号，只允许字母、数字、&和_下划线 综上所述，书写xhtml css javascript 尽量都要小写，连字符尽量用-（javascript的变量用_）

   （2）用过css hack的朋友应该知道，用下划线命名也是一种hack，如使用“_style”这样的命名，可以让ie外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做css检查时会出现错误提示，因此要避免使用下划线命名。

为此得找一个能代替下划线而又合规范的符号，当然不是一定要用这种分隔符之类的，只是个人习惯问题。

           关于CSS的hack详解，我在后面文章里做了介绍

 

【常见命名方式】

   calssname有3种方式：

   1、最常见的-连接，如g-nav, m-box,m-box2, m-box-2， 它能很好的表示语义。只是有些编辑器（如sublime）不能双击选中整个字符串，影响使用，如高亮等。

   2、用_连接，用的原因是：好看，和js的命名接近，可双击；缺点IE6不支持

   3、用驼峰命名className，用的原因是：和java的命名习惯接近，可以双击。最大的问题是css中的classname是不区分大小写的（标准不统一，有的浏览器的某些模式下是区分的）。用这个方式，最后html和css的命名完全一致。

 

【拓展】

   ①驼峰命名：

正如它的名称CamelCase所表示的那样，是指混合使用大小写字母来构成变量和函数的名字

案例：

printEmployeePaychecks()；

print_employee_paychecks()；

第一个函数名使用了骆驼式命名法——函数名中的每一个逻辑断点都有一个大写字母来标记；

第二个函数名使用了下划线法----函数名中的每一个逻辑断点都有一个下划线来标记。

 

【总结】

不建议使用_，推荐-与驼峰命名

 

 

 

 

 

 

 

 

.