css class 重命名,前端开发中CSS类名class的命名

前端开发中CSS类名class的命名

发布时间：2020-03-26 15:58

通常CSS类名命名方式有四种：

下划线：class="seach_input"

减号：class="seach-input"

混乱式：class="seachinput"

驼峰式：class="seachInput"

CSS类名class是用下划线”_”还是减号”-”,这个没有特殊的规定，一个人写代码的时候想怎么写就怎么写。但是在团队合作时就会出现问题，因为有些编辑器解析不一样，所以会制定相应的规范来保证团队代码的一致性，保证代码的简洁性也保证了后期css代码的维护与更改。

四种方法各有利弊：

1、下划线”_”

优点：和程序兼容性好，所有程序语言里的变量命名都可以使用下划线。

缺点：多余了一个字符，视觉生硬不美观。

2、减号”-”

优点：与CSS代码风格一致，例如：text-align:center;代码美观

缺点：用减号”-”分割的字符一般的文本编辑器会认为它是两个字符，从而影响“双击选中”操作，不易修改。另外在程序里减号是变量的运算符，可能会造程序书写困难，造成不必要的错误。

3、混乱式(暂时这样命名)

优点：书写方便，一路小写下去，而且符合XHTML规范

缺点：小写连在一块，不易阅读和后期维护。

4、驼峰式命名

优点：符合编程语言命名规范，节省一个字符,单词易于区分、理解

缺点：XHTML规定都是小写，用某些代码整理工具可能会误把类名全部转化成小写

在书写习惯上，还是仁者见仁，智者见智，顺手即可。以上仅是个人见解。