CSS类名class用下划线”_”还是减号”-”

发表于 2011年5月7日由 kily

其实这个问题早先已经有人讨论过了，但是没有定论。一个人写代码的时候爱咋样咋样，但量在团队合作的时候就会出现问题，一般来说都会制定相应的标准来保证代码风格的一致性。

关于CSS类名的命名方式大致有三种：

1. 下划线，即：class=”main_nav”
2. 减　号，即：class=”main-nav”
3. 驼峰式，即：class=”mainNav”

三种方法各有利利弊，我大概总结了下面几点：

1.下划线

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

缺点：生硬难看，多余一个字符。

2.减号

优点：与CSS代码原生匹配，比如：text-align:center; 视觉上有一致性，也很美观。

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

3.驼峰式

优点：符合编程语言命名规范，节省1个字节

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

大家如果觉得有什么要补充的可以讨论下，个人还是喜欢减号多一点。因为比较原生嘛！

《CSS类名class用下划线”_”还是减号”-”》上有 30 条评论

liuzhaokao 在 2012年4月23日14:49 说：

个人觉得还是_下划线更优雅些

回复 ↓
泡脚在 2011年12月27日15:16 说：

原来CSS的写法也有这么多将就啊

回复 ↓
nobird 在 2011年11月6日23:15 说：

没考虑过那么多…我一直都是乱写的.. – -

回复 ↓
hzlzh 在 2011年6月12日15:03 说：

我用 ——–感觉这才是最优雅的，
驼峰java 和 c++用的多

回复 ↓
- kily 在 2011年6月12日22:24 说：
  
  @hzlzh 强烈同意哈！！！！
  
  回复 ↓
我的职业生涯在 2011年5月31日23:57 说：

我用减号，双击选中，看你怎么想！

回复 ↓
- Snow 在 2011年6月12日23:09 说：
  
  双击可以自动选中整个名字哦？
  
  回复 ↓
  - kily 在 2011年6月14日20:10 说：
    
    @Snow 哈哈。我还是对减号有好感，虽然麻烦一点。但是比较优雅、整齐！
    
    回复 ↓
迷奇在 2011年5月31日20:10 说：

没看之前还真的不知道，真的很谢谢哦，看来我还得学习

回复 ↓
高丝雪肌精官方网站在 2011年5月26日20:19 说：

不大懂技术呵呵没看懂

回复 ↓
薛城人在 2011年5月22日18:06 说：

我倒是喜欢用减号，比较和谐。

回复 ↓
- kily 在 2011年5月22日21:01 说：
  
  @薛城人哈哈.总算遇到个习惯和我一样的哈!!!!!
  
  回复 ↓
宁波ISO 在 2011年5月20日15:05 说：

过来看看。

回复 ↓
hyq1 在 2011年5月18日15:43 说：

只要不错就行

回复 ↓
催情在 2011年5月18日03:18 说：

我觉得下划线也是减号

回复 ↓
afeiship 在 2011年5月17日21:08 说：

Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:keelii&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 503 Service Temporarily Unavailable in /home/keelii/domains/keelii.com/public_html/wp-content/themes/Silence2.0/sidebar.php on line 61

右侧出了一点小问题。。

回复 ↓
- kily 在 2011年5月18日09:04 说：
  
  @afeiship 为什么我这儿没有捏~
  
  回复 ↓
Cheap DVD Box Set 在 2011年5月17日10:46 说：

支持手工艺术啊

回复 ↓
踏雪残情在 2011年5月16日15:55 说：

css类名我也一般用下划线。

回复 ↓
- 林西老九在 2011年5月21日09:37 说：
  
  我不知道啊，嘿嘿
  
  回复 ↓
兴宏程建造师在 2011年5月16日14:59 说：

习惯第一种方法了。

回复 ↓
追梦在 2011年5月14日14:32 说：

我习惯了使用第一种，还没发现这其中有这么多奥秘哈。

回复 ↓
- 林西老九在 2011年5月21日09:38 说：
  
  哈哈，我不知道啊，嘿嘿
  
  回复 ↓
radom 在 2011年5月12日12:59 说：

用下划线表示从属关系
比如：
.mainBar{}
.mainBar_list

回复 ↓
修远兮在 2011年5月11日16:27 说：

我习惯用下划线。

回复 ↓
AFcoder 在 2011年5月10日21:32 说：

你这更新有点略慢阿……
你用的是什么服务器阿，我用ramhost的vps，今天给我挂了16分钟，悲情阿。
还有，C语言起家的，尤其是gtk开始做界面的人，都会对下划线有额外得好感~

回复 ↓
- kily 在 2011年5月11日14:34 说：
  
  @AFcoder 呵呵。大牛大牛哈，我是和人合租的mt vps这两天好像也有慢不过很快就能恢复了！
  
  回复 ↓
bigCat 在 2011年5月7日22:15 说：

个人觉得大小写敏感的语言的整理工具，不会那么傻改变大小写……
so我用的是下划线加拖峰……
fn_myNameIsBigCat
fn是function
虽然看起来有点怪……

回复 ↓
- kily 在 2011年5月9日18:14 说：
  
  @bigCat 果然诡异，不走寻常路！感觉下划线太僵硬了哈！
  
  回复 ↓
A.shun 在 2011年5月7日21:46 说：

学习一下。
很少写css，好像我用的是下划线。。

回复 ↓

发表评论取消回复