懒懒交流会:ClassName的长命名 VS. 短命名
作者:云谦 来源:TaobaoUED 发布时间:2009-11-28 16:08:00
说实话,看到这个题目时我觉得这有什么好讨论的,肯定会是场一边倒的讨论。因为个人比较倾向于短命名,简单优雅,可能是出于程序员的洁癖,容不得任何冗余的东西。(和我一个想法的人应该不在少数吧
====
先看下长命名和短命名的定义:
<!-- 长命名:通过前缀体现上下文环境的CSS命名方式。 --><div class="category"> <div class="category-hd"></div> <div class="category-bd"></div> <div class="category-ft"></div></div><!-- 短命名:通过继承体现上下文环境的CSS命名方式。 --><div class="category"> <div class="hd"></div> <div class="bd"></div> <div class="ft"></div></div>
====
会上大家先是给双方各列了一堆优缺点,结果不相上下。
然后从性能和可维护性上进行了详细的争论。
性能分为下载性能(速度)和渲染性能,大家认为:
1. 下载性能可能是短命名略胜一筹,因为文件会稍小些;
2. 渲染性能则是长命名好些,因为CSS中通常短命名我们用类似.box .hd {}定义样式,而长命名直接是.box-hd {},pagespeed认为选择器长度会影响渲染性能。
(注:其实平时工作中这两点都会被忽略。gzip可以进一步减少第一个问题的差距,而由此引发的渲染性能也是微乎其微)
然后大家就可维护性进行了讨论,这次支持长命名的人较多。
1. 长命名给人较为可靠的感觉;
2. 长命名较短命名发生冲突的几率低很多;
3. 可复用的内容通过短命名定义,无可争议;
…
最后是使用场景,玉伯借用YAHOO首页的例子牵头,大家讨论,总结如下:(主要依据可维护性)
1. 框架级样式用短命名,比如盒模型、栅格;
2. 通用样式用短命名,比如.hidden、.clearfix;
3. 应用级样式用长命名,比如淘江湖项目的通用样式都加上“sns”前缀(有.sns-avatar、.sns-box等);
4. 页面级样式用长命名,比如类目模块,可能包含category-hd、category-bd、category-bd-tips等;
5. 嵌入式应用用长命名,因为可能会被嵌入到任何复杂环境中,比如开源编辑器、Google的各种应用(map, adsence, gmail…)
以上结论有个前提:就是页面是多人(包括后期的维护人员)协作的,一个人的页面(如Blog)不在考虑范围之内。
====
欢迎补充指正。
猜你喜欢
- 如何用ASP发送带附件的邮件?请问如何用CDONTS组件发送带附件的邮件? 见下列代码:<%&nb
- 晚上突然间看到大猫的头像在闪动,速度打开一看,发现他问,以前我写button标签的时候有没有写type属性,老实的我只有诚实地告诉他,我没写
- 一:什么是数据库镜像?Robidoux:数据库镜像是将数据库事务处理从一个SQL Server数据库移动到不同SQL Server环境中的另
- 如何用SQL 建表? 如下:CREATE TABLE statement
- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下: mysql -
- 1:使用SHOW语句找出在服务器上当前存在什么数据库:mysql> SHOW DATABASES;2:2、创建一个数据库MYSQLDA
- 看到论坛上有人模仿alert,自己也写了一个。本来想模仿winapi里的MessageBox ;但可惜js 不支持,阻塞模式。返回值只能用异
- 方法1:/** 功能:数据备份/恢复文件简易方法* 以日期为单位,一天一个备份文件,以当天最后备份为准* 用提交表单的形式进行操作,* 其中
- HTTP_X_FORWARDED_FOR与REMOTE_ADDR的区别.在Request.ServerVariables中并没有HTTP_X
- 如何用ASP发送HTML格式的邮件?HTML格式的邮件可以把网页上的所有元素,包括文字和图片集成保存在一个文件中,阅读和链接非常便捷,请问在
- 学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因
- 这个问题已经不是什么新鲜问题了,网上也有大把的教程,但大多数是授人以鱼,而不授人以渔,经过辛苦的资料收集,思考,调试,整理,我基本上已经把这
- 我们已经知道Application和Session对象的OnStart、OnEnd事件的脚本,都必须是在 Global.asa&n
- 在用到编辑器时,就会碰到一点,那就是标签的闭合问题,这个问题非常严峻,因为这可能会导致网页显示的整体样式受到破坏。这最近在PJ的functi
- 格式:Download.asp?FileName=要下载的文件名 代码如下:Dim Stream Dim Co
- 在产品开发中,由UED发起的项目越来越多,但是现在的问题是很难为其设定商业价值的目标。如果没有明确的商业价值目标,很多公司根本没办法花大成本
- MySQL支持大量的列类型,它可以被分为3类:数字类型、日期和时间类型以及字符串(字符)类型。本节首先给出可用类型的一个概述,并且总结每个列
- 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
- 升级了浏览器到IE9,今天进入公司网站后台突然发现有些页面进不去了,F12调试显示有JS错误:DOM Exception: INVALID_
- 本文从算法入手同时通过实例来讲解如何在SQL Server数据库中实现最优最简的整个过程。算法是计算机科学中一个重要的研究方向,是解决复杂问