简单其实不简单

CSS命名的那点事

又是很久没写过东东了，今天在看张鑫旭blog中的《精简高效的CSS命名准则/方法》时，产生了不小的共鸣。

CSS的命名我使用过很多种方式：

• 用功能名的拼音。感觉很二，也很长，写多了很快就不明白是什么了，因为我拼音也用得不多，打字一直用五笔，写多了就无法很快了解当前样式的意思。
• 用功能名的对应英文词组组合。到是不会让自己感觉很二，但我自己的英文菜得无法言语，所以在写CSS时常常开着google的翻译网页，呵呵，不怕各位笑话。
• 基于CSS属性命名些常用的样式。这是在我写CSS一段时间后慢慢形成的习惯，因为记忆方便，不用写个样式就去想下应该命名成什么。如果有独特需求也只需联合父层就可以进行独特需求的设置了。在我看来这种写法是将CSS属性进行最小单元封装的过程，但这样做也不是没有问题，后面会说到。

但我却从来没有总结过，惭愧啊~~

现在我接到项目一开始很是喜欢在头上写些样式，都成了我写页子的习惯了：

.cRed{color:#F00;}
.tC{text-align:center;}
.b{font-weight:700;}
.....

在写功能模块时给它一个ID，之后的样式就像

#mod .b{...}
#mod .tC{}

这样CSS不会有很多层，样式名也很短，我也不用在每次加入CSS时为想个样式名而花时间了。

这样的命名用起来很舒服，但也不是一点问题没有，如后期的维护上，需求改变时……，对面大量HTML源文件或被JS、PHP等语言引入到代码中的结构，修改它们是个痛苦的过程。

想当初CSS被疯狂提倡时的理由之一就是无需对HTML进行大规模的修改只需改个CSS的性能就能完成所要的。但这种方法进行的却是对CSS属性进行最小单元的封装，样式名称与属性名有着直接的联系，如果要进行修改，改CSS的性能就有点不妥了，让样只能让CSS看起来更加混乱。

所以使用这种方法需要有个平衡点，在定义模块结构时我不会使用这种方式，对于模块的建立我喜欢这样写：

<div id="modName" class="XXX">
    <div class="head">
        <div class="tit">
            <h3>模块名</h3>
        </div>
    </div>
    <div class="con"></div>
    <div class="floot"></div>
</div>

这里面的样式 head tit con floot在最外层都不会定义，起始定义点是#modName .head这样的，当然根据需求结构会有些不同，但基本是这样的。

所以我现写的CSS层级一般是两层，最多也就是四层。