首页新闻找找看学习计划

探讨下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,已更正。

繁华已逝的主页 繁华已逝 | 菜鸟二级 | 园豆:353
提问于:2015-01-09 14:34
< >
分享
所有回答(3)
1

我觉得命名时没必要区分css内容中有没有"-"。

建议对于class名称(以.开头)使用连字符("-"),对于id名称(以#开头)使用下划线(_)。

dudu | 园豆:39952 (高人七级) | 2015-01-09 14:44

能否用上面展示的几个样式做下案例演示呢

支持(0) 反对(0) 繁华已逝 | 园豆:353 (菜鸟二级) | 2015-01-09 14:49

@繁华已逝: 

<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>
支持(0) 反对(0) dudu | 园豆:39952 (高人七级) | 2015-01-09 14:58

@dudu: 可是,这样的话,嵌套的越多,样式名就会变得越长

支持(0) 反对(0) 繁华已逝 | 园豆:353 (菜鸟二级) | 2015-01-09 15:37

@繁华已逝: 一般的页面没这么多嵌套,你给的这个示例嵌套已经够多了

支持(0) 反对(0) dudu | 园豆:39952 (高人七级) | 2015-01-09 15:46

@dudu: 这个只是外框架,如果里面添加文本内容的话,里面还会进行细分,比如说新浪首页,

这是一个6级嵌套,第7级里面的a可以用父样式来控制。

支持(0) 反对(0) 繁华已逝 | 园豆:353 (菜鸟二级) | 2015-01-09 15:56

@繁华已逝: 前面的命名是针对页面结构,文本内容需要另外考虑

支持(0) 反对(0) dudu | 园豆:39952 (高人七级) | 2015-01-09 15:59

@dudu: 感谢回复 ,我感觉自己没有必要那么纠结,鱼与熊掌不可兼得,适情况及需求而定比较好

支持(0) 反对(0) 繁华已逝 | 园豆:353 (菜鸟二级) | 2015-01-09 16:15
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名称过长。如果只是比较简单的网页静态布局还好,嵌套的也不会太多。如果是单页面应用,各种嵌套,这一条就很有必要了。

阿如娜 | 园豆:202 (菜鸟二级) | 2015-01-09 16:39
1

如果是土豪,不愁服务器带宽,不求性能。 可以搞一套规范的、可读性高的,就像各大门户站一样。。。这样人家扒你的皮也容易扒。 

如果不是土豪。 乖乖地, 没必要搞什么特别的规范, 能节省字节就节省,能用就用。 .a.b.c通通都行只要不报错。 

问天何必 | 园豆:3291 (老鸟四级) | 2015-01-09 19:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册