一、“无”的哲学

　　佛家讲究“因果报应”，有果必有应。此段看似与主题没有血缘关系，实际讲的是“因”。

　　我个人比较喜欢老子的道家思想，并喜欢以其思想解释学习与工作中遇到的一些问题。例如我之前写过的“中国古代道家思想与网页重构的思考”一文。

　　老子有云：“天下万物生于有，有生于无”。具体解释就是：天下万物都是由看得见的具体事物（“有”）产生的，而看得见的具体事物（“有”）又是由看不见的，无形无状的东西（“无”）产生的，这个看不见的“无”也就是“道”，或叫做“根”、“母”。

　　我们看武侠片，经常听到“无招胜有招”这句话，这也是道家“无”之思想之体现。因为你心中没有招式，你才能有无限的可能，生成其他的招式以克敌，即所谓以不变应万变；相反，如果你心中牢记一套“华山剑法”，当你与人交手时，势必按照此套路走，要是遇到相克之剑法，结局就是一败涂地。“无招”是一种境界，是你功夫修炼到一定程度才能领悟到的。我们这代人应该都看过李连杰主演的《倚天屠龙记魔教教主》，其中张三丰老头教完张无忌太极拳后问他“记住了没？”张无忌一句“全忘记了！”让人印象深刻。这就是“无”的境界。

　　这种境界我是深有体会的。例如每逢大考之前，我总是把以前做过的题目全部忘掉，这样，考试时就能思如泉涌；反而是强记题目的做法限制了发挥。这就好比发射炮弹，炮管里提前预装了重型炸弹，结果战斗开始时，发现需要的是烟雾弹，此时，反而被预装的炸弹给阻塞限制了。打篮球也有这种体会，如果心中记得的是动作，我要这么走，然后这么做，往往表现不佳。反而是脑中什么想法也没有，全靠下意识行动，那真是所向披靡，得分如探囊取物。

　　可见，要想发挥更大，就需要“无”，把一些“限制的东西”通通去掉。没有限制才能发挥出最大的潜能。站在最简单，最原始的那个点上，你才能自由驰骋，应变自如。

　　二、名字的本质是什么

　　我们有没有思考过这么一个问题：名字的本质是什么？
　　这个问题其实不难，名字本质上就是一个符号，用来区分人与人的。与符号一样，名字本身就蕴含着很多的信息。举个例子，我的名字：张鑫旭。其中蕴含的信息有：我老爸也姓张，我是上午太阳刚刚升起的时候出生的，我五行缺金。一个名字，如果其蕴含的信息越多，则这个名字就越独特，也就是说，越不可能被别人使用；相反如果这个名字很普通，例如李娜、张艳之类，就会被大规模的重用，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:0 0 8px; text-align:right;}

　　四、精简高效CSS命名之“三无原则”

　　此“三无原则”就是：无ID，无层级，无标签

　　CSS命名就应该最简单、最直接，直捣黄龙。没有HTML标签，没有层级，这些通通滚蛋，不要。为什么不要，有三大原因：
　　1.限制重用
　　我们会使用层级(#test .test)，会使用标签(ul.test)，可能是习惯(没多想)，或是为了避免冲突。但是，我跟你说，从今以后，这种写法让他见鬼去吧（如果不是为了改变CSS优先级的话）。正如开篇论述的哲学观点，你限制越多，越抑制了CSS的重用性。例如#test .test{}这种写法，里面的CSS重用性多大，完全限死在了id为test的元素下，哪有重用性可言；又如ul.test，我勒个去，这个ul标签十有八九就是装饰用的，往这儿一放，同样CSS样式的div标签可以用吗？哭爹喊娘，眼泪汪汪也不管用啊。所以，相信我，层级啊，标签啊什么的，通通见鬼去吧。要知道，层级啊，标签啊作用是什么，是用来提高CSS优先级，把那个字母长的让人发毛的”!important”干掉的。

　　2. CSS文件大小
　　这瓜子虽小，吃多了也是可以填饱肚子的。所以，你的CSS名称不要像老太太的裹脚布一样，搞得又臭又长，如下图所示的人人网那个冗长的CSS命名吧：

　　你看名称的字节数已经比属性还大了，要是这些名称都在15字符以内，乖乖，这个CSS文件可以小个1~2K绝对没有问题的。你看下图这样子的命名，这样子的CSS排版是不是更舒服，更简洁。

　　3.降低了渲染效率
　　来个例子考考大家（以后我面试别人可能就会考这题），HTML如下：

<div id="test">    <ul class="test"></ul></div>

it知识库：精简高效的CSS命名准则/方法，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。