懒懒交流会: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)不在考虑范围之内。
====
欢迎补充指正。
猜你喜欢
- 常用的转换函数是 cast 和 convert,用于把表达式得出的值的类型转换成另一个数据类型,如果转换失败,该函数抛出错误,导致整个事务回
- 使用Opencv打开笔记本电脑摄像头报错近期要做一个下位机上发图像数据给上位机的任务,调试时自己写了一个客户端获取笔记本电脑的摄像头视频数据
- 目录介绍Python连接MySQL实现数据储存总结介绍MySQL是一个关系型数据库,MySQL由于性能高、成本低、可靠性好,已经成为最流行的
- 本文实例讲述了PHP中使用addslashes函数转义的安全性原理分析。分享给大家供大家参考。具体分析如下:先来看一下ECshop中adds
- <%'asp事务处理。'测试数据库为sql server,服务器为本机,数据库名为test,表名为a,两个字段id(i
- 1、前言前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用
- 基本概念数字图像定义对于一幅图像,我们可以将其放入坐标系中,这里取图像左上定点为坐标原点,x 轴向右,和笛卡尔坐标系x轴相同;y 轴向下,和
- 近期,需要实现检测摄像头中指定坐标区域内的主体颜色,通过查阅大量相关的内容,最终实现代码及效果如下,具体的实现步骤在代码中都详细注释,代码还
- 注:可视化工具 Navicat 15 for MySQL当我们某天忘记我们的root用户密码,登录不到数据库时,只需要修改root用户的密码
- 一、前言Go程序像C/C++一样,如果开发编码考虑不当,会出现cpu负载过高的性能问题。如果程序是线上环境或者特定场景下出现负载过高,问题不
- 支持按照文件夹去批量处理,也可以单独一个文件进行处理,并且可以自定义标识符最近在开发一个答题类的小程序,到了录入试题进行测试的时候了,发现一
- Cookie是一种小型文本文件,存储在用户计算机中,用于跟踪用户在互联网上的活动。Cookie通常由网站创建,以便记住用户的偏好和登录状态,
- 在计算loss的时候,最常见的一句话就是tf.nn.softmax_cross_entropy_with_logits,那么它到底是怎么做的
- Yahoo和Google都有自己的建设高性能网站最佳实践, 我不做赘述, 需要了解的自行查阅资料:Yahoo的: Best Practice
- 如何用WSH获取机器的IP配置信息?我们用VBSCRIPT转换了: Option Explicit Dim&n
- 一、目的之前在博文SQL Server数据库最小宕机迁移方案中提到了使用了完全备份+差异备份的功能完成了数据库的转移,但是这个方法在遇到了7
- vue3官方文档 defineProps 和 defineEmits 都是只能在 <
- Python提供了一个内联模块buildin,该模块定义了一些软件开发中经常用到的函数,利用这些函数可以实现数据类型的转换、数据的计算、序列
- 依赖os、sys、requests工具代码废话不多说,上代码。#!/usr/bin/env python3# -*- coding: utf
- 1. jquery.jqzoom.js//*************************************************