探讨下css命名的问题
0
[待解决问题]
我相信很多人都跟我一样，至少曾经有过类似的经历。就是在不同时期对css命名的写法会有不同的变化。
举个很简单的例子：你第一天学div时写的代码跟你一个月后的会截然不同！刚开始时，你可能会任意命名，什么.a,.b,.ccc等。但是随着时间的推移和经验的积累，你不会再这样命名样式，而是有目标有选择性的命名。但是，这个时候问题又来了。我列举几种情况的例子吧：
第一种：类似float:left;poaition:absolute；这种中间无“-”时如何命名；
第二种：类似text-align:center;font-size:16px;margin-top:10px；这种中间有“-”时如何命名。
我先说下我自己的习惯吧，算做个抛砖引玉吧。
无论是在css中还是在jquery中我都习惯用“_”而不用“-”，虽然网上很多资料表明某些浏览器对“_”不支持，但我不知道这个说法的真实性有多少。
对于第一种无“-”时我是这样命名的：.fl{float:left}.pa{position:absolute}，有段时间是这样命名：.f_l{float:left}.po-a{position:absolute}.po_a{position:absolute}；
对于第二种有“-”时我是这样命名的：.t_a_c{text-align:center}.f_s_16{font-size:16px;}.m_t_10{margin-top:10px}有段时间这样：.t-a_c{text-align:center}.f-s_16{font-size:16px;}.m-t_10{margin-top:10px}，有时对于带数字的就直接不了了“_”，直接写.m_t10{margin-top:10px}等等
现在很纠结，高人们出来交流交流，发表下观点，探讨下css命名可好？
问题补充：
还有一个就是层级关系时的命名，比如说：有一个名叫“main”的div，然后里面有3个div，这3个div是等高平分宽，中间大div里面又有3个小div，这3个小div是等宽平分高。大致如下图这种布局
这种时候命名上又该怎么写呢？我是这样写的
<div class="main"> <div class="?">左侧 main_l</div> <div class="?">中间 main_c <div class="?">中间的div内部嵌套3个div，是垂直方向上布局 上 main_c_t</div> <div class="?">中 main_c_c</div> <div class="?">下 main_c_b</div> </div> <div class="?">右侧 main_r </div> </div>
说明下：css样式可忽略，主要是想探讨下命名。
修正下刚才复制代码时的一个错误：中间的为main_c，已更正。
所有回答(3)
1
我觉得命名时没必要区分css内容中有没有"-"。
建议对于class名称（以.开头）使用连字符（"-"），对于id名称（以#开头）使用下划线（_）。
能否用上面展示的几个样式做下案例演示呢
@繁华已逝:
<div class="main"> <div class="main-sidebar-left">左侧 main_l</div> <div class="main-content">中间 main_c <div class="main-content-header">中间的div内部嵌套3个div，是垂直方向上布局 上 main_r_t</div> <div class="main-content-body">中 main_r_c</div> <div class="main-content-footer">下 main_r_b</div> </div> <div class="main-sidebar-right">右侧 main_r </div> </div>
@dudu: 可是，这样的话，嵌套的越多，样式名就会变得越长
@繁华已逝: 一般的页面没这么多嵌套，你给的这个示例嵌套已经够多了
@dudu: 这个只是外框架，如果里面添加文本内容的话，里面还会进行细分，比如说新浪首页，
这是一个6级嵌套，第7级里面的a可以用父样式来控制。
@繁华已逝: 前面的命名是针对页面结构，文本内容需要另外考虑
@dudu: 感谢回复 ，我感觉自己没有必要那么纠结，鱼与熊掌不可兼得，适情况及需求而定比较好
0
我的习惯是：意思表达全面、好记、简洁，优先级从左到右递减。
1. 能不用缩写就不用缩写，除非是那种非常明显的缩略。比如.btn-primary。或者缩写有自己的原则，就是别缩写完了亲娘都不认识了，那就麻烦了o(╯□╰)o比如：a、f_l。
2. 如果class名称是由多个单词组成的就用“-”分割一下。比如.dropdown-menu。css命名一般都使用“-”，css属性和值都是这个风格的，比如border-radius。
3. 在class名称中充分体现其使用情景。比如，.dropdown-menu-right、text-left（类型/表现形式+应用场景），一看知道什么情况下用~也非常好记（这是重点）~~
4. 利用父子关系避免class名称过长。如果只是比较简单的网页静态布局还好，嵌套的也不会太多。如果是单页面应用，各种嵌套，这一条就很有必要了。
1
如果是土豪，不愁服务器带宽，不求性能。 可以搞一套规范的、可读性高的，就像各大门户站一样。。。这样人家扒你的皮也容易扒。
如果不是土豪。 乖乖地， 没必要搞什么特别的规范， 能节省字节就节省，能用就用。 .a.b.c通通都行只要不报错。
