登录

CSS样式命名之“逻辑块命名法”

当我们依照结构与内容分离的思想去切出一个符合标准的网页时,每个人可能都有自己的样式命名习惯。

但这种不同的习惯一方面未必系统,即往往随意性比较强,容易重名造成麻烦,管理也很不方便,甚至有时候会为起个名字而发愁(呵呵,夸大了点^0^);另一方面,用在一个团队中,也会由于混乱性,而带来团队效率的降低。

再者,目前的样式命名基本上都用“英文”,极少有人用中文(来回切换输入法也很麻烦的)。如果有些人习惯于全套英文式命名的话,会对团队里英文不佳者造成一定的麻烦。因为他们要为起名去查字典,而且他们查到的单词还不一定可以准确形容被命名的块逻辑结构。比如曾经有人建议使用面包屑(crumb)来作为导航命名——故事来自两个迷路的孩子沿着撒下的面包屑找回家的英文小说典故。但是,这作为个性还行,用在团队中却绝不可取。认知不同,别人说不定也有自己的典故。

此外,还有几个忌讳之处:比如,不要出现表示方向的命名,例如“left、right、top、bottom”等等。因为一旦如果我们需要左边放右边,那么这些命名将完全失去作用,反而成为了混淆我们认知的垃圾。

下面我提出一种命名系统设想(逻辑块命名法)供大家参考:

<div id="a1">
     
    <!--第1层-->
       
    <div id="a1a">
         
        <!--第2层-->
            
        <div id="a1a1">
             
            <!--第3层-->
                 
            <div id="a1a1a">
                 
                <!--第4层-->
                      
                <ul id="a1a1a1">
                     
                    <!--第5层-->
                           
                    <li class="li01">
                        <a>
                            邮箱列表1
                        </a>
                    </li>
                     
                    <!--类