精简高效的CSS命名准则和方法（4）
作者：zhangxinxu 来源：zhangxinxu 发布时间：2010-09-17 18:38:00
2. CSS文件大小
这瓜子虽小，吃多了也是可以填饱肚子的。所以，你的CSS名称不要像老太太的裹脚布一样，搞得又臭又长，如下图所示的人人网那个冗长的CSS命名吧：
你看名称的字节数已经比属性还大了，要是这些名称都在15字符以内，乖乖，这个CSS文件可以小个1~2K绝对没有问题的。你看下图这样子的命名，这样子的CSS排版是不是更舒服，更简洁。
3. 降低了渲染效率
来个例子考考大家（以后我面试别人可能就会考这题），HTML如下：
<div id="test">
<ul class="test"></ul>
</div>
现在要给这里的ul标签一个样式，比如说padding-left:25px;那么下面四种写法哪个渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}.
如果单纯的ul与.test PK，我还真拿不定谁的渲染速度更快些。但是，一旦牵扯到层级与标签，我100％确定，.test这种最直接的命名方式渲染效率是最高的。要知道，CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素，则#test ul{}速度是最快的，先id获取，再tag获取，这些可都是JavaScript内置的方法。但是，CSS的渲染方式则是属于外太空系的了，《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素，所以，出现#test div{}这种写法的人都是傻×的，页面先渲染id为test的元素？非也！先渲染页面上所有的div，再去寻找其老爸有没有id为test的元素。由于这种渲染差异最大就200~300毫秒，我们人一般是感觉不到的。所以，长久以来，也都不以为然。但是，我是绝对容不下这种写法的，还有，要是让我看到类似于ul#test{}这样子的命名，不好意思，面试肯定过不了。
所以，CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”，“无标签”。
对于原则第一条“无ID”，其实与性能没有多大关系，只是一般ID都与JavaScript有 * ，如果再牵扯到CSS样式，如此复杂的三角关系，日后不好处理啊。
0
投稿猜你喜欢
- 现在正在搞三层开发，用ASP和VB6.0，但是现在苦于没有找到合适的方法来调试自己写的DLL文件，效率相当低。 &n
译序：本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。前一段时间，我- 鉴于ASP脚本语言是在服务器端IIS或PWS中解释和运行，并可动态生成普通的HTML网页，然后再传送到客户端供浏览的这一特点。我们要在本机上
- 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什么意思，但是这两篇重
- 互联网的真正算得上成功的产品屈指可数，每年都有成千上万个新网站出现，同时也有成千上万的网站死去，而那些算得上成功的产品，无不是从这些尸骨堆里
- 应用目标：制作文字特效 应用软件：Dreamweaver MX操作难度：★★☆☆☆我们常用的网页制作工具Dreamweaver MX不仅可以
- 【原文地址】 Recipe: Deploying a SQL Database to a Remote Hosting Environmen
- GetRows 方法 将 Recordset 对象的多个记录复制到数组中。 语法 代码如下: array = recordset.GetR
- 下面是用SA-FileUp组件上传一个HTML文件的程序：fileup.htm < HTM
- 简单的说，一个数据库管理系统应该的提供的基本服务有两种：1.数据访问。对每个数据库管理系，数据访问服务都包含一下几种(1)插入--向数据库中
- J2ME是利用HttpConnection建立HTTP连接，然后获取数据，ASP也是利用HTTP协议，因而可以利用J2ME与ASP建立连接，
- Tips 1：新增数据表与定义字段更加直观若要建立新数据表，可以在开启数据库后，直接单击“创建”标签，在“表”选项组中单击“表”按钮，即可新
- 本文给出一条 SQL 语句用于展示在同一名服务器上，不同的数据库间查询，注意当前连接用户要对两个库都有权限SQL Server 中 SQL
- 【尝尝管理员的滋味】- 淡然看,其实一切都很简单IE的滤镜泄露是最大的危害,没有找到方法解决,所以禁用了滤镜。<!DOCTYPE ht
- 使用jmail组件发送邮件：Function JMail(Send_From,Send_To,Send_Subject,Send_
- 今早打开 腾讯ISD的博客 ，看到一篇新的文章，《迷你屋视觉规范简介》，赶紧看了来学习。不过给我抓到问题咯，臭鱼不介意我在这说下吧：这套规范
- 一．雅黑设计理念 雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更
- 若对于同一数据库实例中的两个数据库进行同步则直接对数据库表创建Trigger。SQL Server 2005的联机帮助：Trigger on
- 很多人错误地认为ASP是简单、低效的代名词，认为ASP是低能的，不足挂齿的，也很简单，一学就会，一琢磨就精通。有人讲ASP不安全，写ASP的
- Mysql数据库备份和还原常用的命令是进行Mysql数据库备份和还原的关键，没有命令，什么都无从做起，更谈不上什么备份还原，只有给系统这个命
