精简高效的CSS命名准则方法.pdfVIP

“ ” “ ” 一、““无””的哲学 佛家讲究“因果报应”，有果必有应。此段看似与主题没有血缘关系，实际讲的是“因”。 我个人比较喜欢老子的道家思想，并喜欢以其思想解释学习与工作中遇到的一些问题。 例如我之前写过的“中国古代道家思想与网页重构的思考”一文。 老子有云：“天下万物生于有，有生于无”。具体解释就是：天下万物都是由看得见的具 体事物（“有”）产生的，而看得见的具体事物（“有”）又是由看不见的，无形无状的东 西（“无”）产生的，这个看不见的“无”也就是“道”，或叫做“根”、“母”。 我们看武侠片，经常听到“无招胜有招”这句话，这也是道家“无”之思想之体现。因为你 心中没有招式，你才能有无限的可能，生成其他的招式以克敌，即所谓以不变应万变； 相反，如果你心中牢记一套“华山剑法”，当你与人交手时，势必按照此套路走，要是遇 到相克之剑法，结局就是一败涂地。“无招”是一种境界，是你功夫修炼到一定程度才能 领悟到的。我们这代人应该都看过李连杰主演的《倚天屠龙记魔教教主》，其中张三丰 老头教完张无忌太极拳后问他“记住了没？”张无忌一句“全忘记了！”让人印象深刻。这 就是“无”的境界。 这种境界我是深有体会的。例如每逢大考之前，我总是把以前做过的题目全部忘掉，这 样，考试时就能思如泉涌；反而是强记题目的做法限制了发挥。这就好比发射炮弹，炮 管里提前预装了重型炸蛋，结果战斗开始时，发现需要的是烟雾弹，此时，反而被预装 的炸蛋给阻塞限制了。打篮球也有这种体会，如果心中记得的是动作，我要这么走，然 后这么做，往往表现不佳。反而是脑中什么想法也没有，全靠下意识行动，那真是所向 披靡，得分如探囊取物。 可见，要想发挥更大，就需要“无”，把一些“限制的东西”通通去掉。没有限制才能发挥 出最大的潜能。站在最简单，最原始的那个点上，你才能自由驰骋，应变自如。 二、名字的本质是什么 我们有没有思考过这么一个问题：名字的本质是什么？ 这个问题其实不难，名字本质上就是一个符号，用来区分人与人的。与符号一样，名字 本身就蕴含着很多的信息。举个例子，我的名字：张鑫旭。其中蕴含的信息有：我老爸 也姓张，我是上午太阳刚刚升起的时候出生的，我五行缺金。一个名字，如果其蕴含的 信息越多，则这个名字就越独特，也就是说，越不可能被别人使用；相反如果这个名字 很普通，例如李娜、张艳之类，就会被大规模的重用，OK，这其实没什么大不了的， 我们的唯一身份标识不是名字，而是身份证，但是，对于CSS样式的命名，冲突与否可 不是拉便便，擦个屁股就没事的。 对于CSS，为了避免样式冲突，我们总会给其赋予相当特殊的命名，或是在选择符上添 加HTML标记，或是使用层级。所谓一朝怕蛇咬，十年怕井绳。一旦我们经历过样式 冲突带来的让人吐血的麻烦后，我们可能就会时时在避免冲突上狠做文章，所谓过犹不 及，结果又是一个烂摊子，本如花似玉的黄花小闺女变成个臃肿的肥妞。例如下面人人 网的CSS命名： 我想我们都希望写出精简高效的CSS代码，如果CSS重用性越高，想必就越高效。这 如人的名字一样，如果名字越普通，越没有含义，越容易被重用，所以CSS要想重用性 高，就需要命名简单。但是，简单的命名越容易造成样式冲突，例如.more{}。从这点上 来说，重用性与样式冲突时两个对立的矛盾体。 不过，万幸的是，这种矛盾并不是不可调和的。记住一些准则/方法，CSS既可以有高 度的重用性，又不会有样式冲突的困扰。下面就将介绍这些命名方法。 三、面向属性的命名方法 我们习惯在CSS命名的时候掺杂语义，这样可以让代码更易懂。例如淘宝首页“免费注 册”按钮上的class名称：help-guest-regist 上面的class命名语义就很明显，独眼龙看告示——一目了然，”help-guest-regist”就是” 帮助-顾客-注册”，很nice，很人性化的命名。作为在单一的首页上使用，我是很难挑出 什么毛病来的。 “ ” 但是，从道家 无 的哲学思想来看，语义其实是对自身的一种束缚，越是语义强烈的命 名越是没有重用性（尤其是内容语义的）。举个实际点的例子，例如人人网的右侧边栏 的标题：//zxx:一般找这类反例我就喜欢找人人网还有新浪，基本上一找一个准。人人网虽然外表长得跟 facebook类似，但是就CSS而言，差距不是一两个档次的。 这个标题的class名是”side-item-header”，样式如下图所示： 现在一切ok，现在设想下，如果页面中间的模块有个标题，其样式也是： {padding:008px;text-align:right;} 那你发现前面