《精简高效css命名准则方法》由会员分享，可在线阅读，更多相关《精简高效css命名准则方法（18页珍藏版）》请在金锄头文库上搜索。
1、一、一、“ “ “ “无无” ” ” ”的哲学的哲学佛家讲究“因果报应”，有果必有应。此段看似与主题没有血缘关系，实际讲的是“因”。 我个人比较喜欢老子的道家思想，并喜欢以其思想解释学习与工作中遇到的一些问题。 例如我之前写过的“中国古代道家思想与网页重构的思考”一文。 老子有云：“天下万物生于有，有生于无”。具体解释就是：天下万物都是由看得见的具 体事物（“有”）产生的，而看得见的具体事物（“有”）又是由看不见的，无形无状的东 西（“无”）产生的，这个看不见的“无”也就是“道”，或叫做“根”、“母”。 我们看武侠片，经常听到“无招胜有招”这句话，这也是道家“无”之思想之体现。因为你 心中没有
2、招式，你才能有无限的可能，生成其他的招式以克敌，即所谓以不变应万变； 相反，如果你心中牢记一套“华山剑法”，当你与人交手时，势必按照此套路走，要是遇 到相克之剑法，结局就是一败涂地。“无招”是一种境界，是你功夫修炼到一定程度才能 领悟到的。我们这代人应该都看过李连杰主演的倚天屠龙记魔教教主 ，其中张三丰 老头教完张无忌太极拳后问他“记住了没？”张无忌一句“全忘记了！”让人印象深刻。这 就是“无”的境界。 这种境界我是深有体会的。例如每逢大考之前，我总是把以前做过的题目全部忘掉， 这 样，考试时就能思如泉涌；反而是强记题目的做法限制了发挥。这就好比发射炮弹， 炮 管里提前预装了重型炸蛋，结果战斗
3、开始时，发现需要的是烟雾弹，此时，反而被预装 的炸蛋给阻塞限制了。打篮球也有这种体会，如果心中记得的是动作，我要这么走， 然 后这么做，往往表现不佳。反而是脑中什么想法也没有，全靠下意识行动，那真是所向 披靡，得分如探囊取物。 可见，要想发挥更大，就需要“无”，把一些“限制的东西”通通去掉。没有限制才能发挥没有限制才能发挥 出最大的潜能出最大的潜能。站在最简单，最原始的那个点上，你才能自由驰骋，应变自如。二、名字的本质是什么二、名字的本质是什么我们有没有思考过这么一个问题：名字的本质是什么？ 这个问题其实不难，名字本质上就是一个符号，用来区分人与人的。与符号一样，名字 本身就蕴含着很多的信息。
4、举个例子，我的名字：张鑫旭。其中蕴含的信息有：我老爸 也姓张，我是上午太阳刚刚升起的时候出生的，我五行缺金。一个名字，如果其蕴含的 信息越多，则这个名字就越独特，也就是说，越不可能被别人使用；相反如果这个名字很普通，例如李娜、张艳之类，就会被大规模的重用，OK，这其实没什么大不了的，我们的唯一身份标识不是名字，而是身份证，但是，对于 CSS 样式的命名，冲突与否可不是拉便便，擦个屁股就没事的。对于 CSS，为了避免样式冲突，我们总会给其赋予相当特殊的命名，或是在选择符上添加 HTML 标记，或是使用层级。所谓一朝怕蛇咬，十年怕井绳。一旦我们经历过样式冲突带来的让人吐血的麻烦后，我们可能就会时时
5、在避免冲突上狠做文章，所谓过犹不 及，结果又是一个烂摊子，本如花似玉的黄花小闺女变成个臃肿的肥妞。例如下面人人网的 CSS 命名：我想我们都希望写出精简高效的 CSS 代码，如果 CSS 重用性越高，想必就越高效。这如人的名字一样，如果名字越普通，越没有含义，越容易被重用，所以 CSS 要想重用性高，就需要命名简单。但是，简单的命名越容易造成样式冲突，例如.more。从这点上来说，重用性与样式冲突时两个对立的矛盾体。不过，万幸的是，这种矛盾并不是不可调和的。记住一些准则/方法，CSS 既可以有高度的重用性，又不会有样式冲突的困扰。下面就将介绍这些命名方法。三、面向属性的命名方法三、面向属性的命
6、名方法我们习惯在 CSS 命名的时候掺杂语义，这样可以让代码更易懂。例如淘宝首页“免费注册”按钮上的 class 名称：help-guest-regist上面的 class 命名语义就很明显， 独眼龙看告示一目了然， ”help-guest-regist”就是”帮助-顾客-注册”，很 nice，很人性化的命名。作为在单一的首页上使用，我是很难挑出什么毛病来的。 但是，从道家“无”的哲学思想来看，语义其实是对自身的一种束缚，越是语义强烈的命 名越是没有重用性（尤其是内容语义的） 。举个实际点的例子，例如人人网的右侧边栏 的标题：/zxx:一般找这类反例我就喜欢找人人网还有新浪，基本上一找一个准。
7、人人网虽然外表长得跟facebook 类似，但是就 CSS 而言，差距不是一两个档次的。这个标题的 class 名是”side-item-header”，样式如下图所示：现在一切 ok，现在设想下，如果页面中间的模块有个标题，其样式也是：padding:0 0 8px; text-align:right;那你发现前面已经有一模一样的 CSS 样式后，你会怎么办。把中间的标题也用”side-item-header”这个 class 吗？这里”side”就是表示“边”的意思，这就意味着这个样式用在非侧边栏就是不合理的。你能做的估计即使新命名一个 class，就像是”body-item-header
8、”，明明是同样的 CSS 属性，结果却不能重用（即使使用标识符组合并 CSS，这里的命名也是没有重用的） 。可见命名不合理会大大限制你的 CSS 重用性。如何命名才能让 CSS 发挥最大的重用性潜力呢？答案就是“面向属性的命名面向属性的命名”。这种命名就是要让你把页面啊设计啊什么的通通塞到马桶里冲走，不要管页面什么位置，什么内容，there is noting, 这儿什么都没有，既然什么都没有， 也就没有了任何限制， 于是 CSS 可以自由出入于任何地方， 无限重用，而且不用担心冲突，因为“面向属性的命名”就是针对自身属性的一种命名方式，只会overwrite，不会冲突。相比很多同行都用过这样
9、的命名方式，只是不够系统，不够大胆、彻底，多浅尝辄止，比如像是开心网，还有时光网的CSS 代码的前面一部分样式命名：我在“CSS 样式分离之再分离”一文中就展示过这种命名了，分离为什么可以让样式的重用性放大至最大，就是因为分离后样式的命名就是样式本身。 就拿上面人人网的标题样式举例，人人网的做法是：.side-item-headerpadding:0 0 8px; text-align:right;要是我，我会对其进行分离。在实际项目时，text-align:right;这个属性早就在 CSS 通用样式库里面了， 而 padding:0 0 8px;则会以 padding-bottom:8px
10、;的形式放在网站通用样式库里了（详细请参见我的“我是如何对网站 CSS 进行架构的”一文） 。最后，CSS 命名与样式会如下：.trtext-align:right;.pb8padding-bottom:8px;而这里分离出来的样式又可以被其他地方使用。是不是有点“吸星大法”的感觉。 当然，如果网站本身的架构不是对每个侧栏内容进行模块化处理的话，说实话，这里标题的分离还是有点危险的。想想看，如果那天产品经理说底部 padding 值要改成10像素，啊哦，如果你的网站架构不合理，含这类标题的模块到处塞，会改到你急火攻心， 吐血三升而亡的。所以，对于分离，我反复强调，“千万不要对网站通用的元素进行
11、分千万不要对网站通用的元素进行分 离离”。所以，记住精简高效的 CSS 命名准则之一：对于网站非通用元素，如果样式简单对于网站非通用元素，如果样式简单(12(12(12(12个属性个属性) ) ) )，对其分离并使用面向属性的命名方法。，对其分离并使用面向属性的命名方法。四、精简高效四、精简高效 CSSCSSCSSCSS 命名之命名之“ “ “ “三无原则三无原则” ” ” ”此“三无原则”就是：无无 IDIDIDID，无层级无层级，无标签无标签CSS 命名就应该最简单、最直接，直捣黄龙。没有 HTML 标签，没有层级，这些通通滚蛋，不要。为什么不要，有三大原因：1.1.1.1. 限制重用限制
12、重用我们会使用层级(#test .test)，会使用标签(ul.test)，可能是习惯(没多想)，或是为了避免冲突。但是，我跟你说，从今以后，这种写法让他见鬼去吧（如果不是为了改变 CSS优先级的话） 。正如开篇论述的哲学观点，你限制越多，越抑制了 CSS 的重用性。例如#test .test这种写法，里面的 CSS 重用性多大，完全限死在了 id 为 test 的元素下，哪有重用性可言；又如 ul.test，我勒个去，这个 ul 标签十有八九就是装饰用的，往这儿一放，同样 CSS 样式的 div 标签可以用吗？哭爹喊娘，眼泪汪汪也不管用啊。所以，相信我，层级啊，标签啊什么的，通通见鬼去吧。要
13、知道，层级啊，标签啊作用是什么， 是用来提高 CSS 优先级，把那个字母长的让人发毛的”!important”干掉的。2.2.2.2. CSSCSSCSSCSS 文件大小文件大小这瓜子虽小，吃多了也是可以填饱肚子的。所以，你的 CSS 名称不要像老太太的裹脚布一样，搞得又臭又长，如下图所示的人人网那个冗长的CSS 命名吧：你看名称的字节数已经比属性还大了，要是这些名称都在15字符以内，乖乖，这个 CSS文件可以小个12K 绝对没有问题的。你看下图这样子的命名，这样子的 CSS 排版是不是更舒服，更简洁。3.3.3.3. 降低了渲染效率降低了渲染效率来个例子考考大家（以后我面试别人可能就会考这题
14、） ，HTML 如下：现在要给这里的 ul 标签一个样式，比如说 padding-left:25px;那么下面四种写法哪个渲染速度最快？#test .test， ul.test，#test ul 以及.test。如果单纯的 ul 与.test PK，我还真拿不定谁的渲染速度更快些。但是，一旦牵扯到层级与标签，我100%确定，.test 这种最直接的命名方式渲染效率是最高的。要知道，CSCSCSCSS S S S渲染元素和使用渲染元素和使用 JavaScriptJavaScriptJavaScriptJavaScript 获取页面元素那是完全不一样的获取页面元素那是完全不一样的。如果是使用 Ja
15、vaScript获取 DOM 元素，则#test ul速度是最快的，先 id 获取，再 tag 获取，这些可都是JavaScript 内置的方法。但是，CSS 的渲染方式则是属于外太空系的了， 高性能网站进阶指南一书曾提到 CSS 的渲染方式是“从右往左从右往左”渲染的，就拿#test ul举例，先渲染页面上所有的 ul 标签，再去寻找 id 为 test 的元素，所以，出现#test div这种写法的人都是傻的，页面先渲染 id 为 test 的元素？非也！先渲染页面上所有的 div，再去寻找其老爸有没有 id 为 test 的元素。由于这种渲染差异最大就200300毫秒（补充补充：这里的差
16、异不是说单纯一个样式的差异，而是这些写法泛滥的页面的全部渲染，其渲染差异数据可以参见“翻译-不同 CSS 技术及其 CSS 性能”一文） ，我们人一般是感觉不到的。所以，长久以来，也都不以为然。但是，我是绝对容不下这种写法的，还有，要是让我看到类似于 ul#test这样子的命名，不好意思，面试肯定过不了。所以，CSS 命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也 是为什么要“无层级”，“无标签”。对于原则第一条“无 ID”，其实与性能没有多大关系，只是一般 ID 都与 JavaScript 有奸情，如果再牵扯到 CSS 样式，如此复杂的三角关系，日后不好处理啊。五、五、“ “ “ “三无原则三无原则” ” ” ”遗留之样式冲突问题遗留之样式冲突问题正如上面讲的， 层级， 标签可以避免样式冲突， 虽然“面向属性的命名”不存在冲突问题， 但是，页面上很多样式是无法分离使用“面向属性的命名”的，此时，一不能有层级
