精简高效的CSS命名准则和方法（2）
作者：zhangxinxu 来源：zhangxinxu 发布时间：2010-09-17 18:38:00
我想我们都希望写出精简高效的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样式后，你会怎么办。把中间的标题也用”side-item-header”这个class吗？这里”side”就是表示“边”的意思，这就意味着这个样式用在非侧边栏就是不合理的。你能做的估计即使新命名一个class，就像是”body-item-header”，明明是同样的CSS属性，结果却不能重用（即使使用标识符组合并CSS，这里的命名也是没有重用的）。
可见命名不合理会大大限制你的CSS重用性。如何命名才能让CSS发挥最大的重用性潜力呢？答案就是“面向属性的命名”。这种命名就是要让你把页面啊设计啊什么的通通塞到马桶里冲走，不要管页面什么位置，什么内容，there is noting, 这儿什么都没有，既然什么都没有，也就没有了任何限制，于是CSS可以自由出入于任何地方，无限重用，而且不用担心冲突，因为“面向属性的命名”就是针对自身属性的一种命名方式，只会overwrite，不会冲突。
相比很多同行都用过这样的命名方式，只是不够系统，不够大胆、彻底，多浅尝辄止，比如像是开心网，还有时光网的CSS代码的前面一部分样式命名：
0
投稿猜你喜欢
- 有2个不同的方法增加用户：通过使用GRANT语句或通过直接操作MySQL授权表。比较好的方法是使用GRANT语句，因为他们是更简明并且好像错
- 如何制作一个文本文件编辑器？我们也来做一个：newdoc.asp<％@ Language=VBScript ％&g
- UPDATE语句的速度更新查询的优化同SELECT查询一样，需要额外的写开销。写速度依赖于更新的数据大小和更新的索引的数量。没有更改的索引不
以下为测试例子。 1.首先创建两张临时表并录入测试数据： 代码如下:create table #temptest1 ( id i- 这个技巧将教你如何用css做出漂亮的文本按钮，有活力的按钮将节省你很多制作图片的时间，也能让你一天的工作中成为一个快乐的人，让我们一起看看效
- mysql数据库里，对一个已创建的表进行DDL操作，比如说添加一个字段。在做测试时，发现ddl操作的时间特别的长。
- 以前在一个图书类网站看到这样一个功能：客户可以按条件搜索书目的信息，服务器会将符合条件的信息筛选出来保存为一个Excel文件供客户下载。今天
- 看了不少朋友的个人网站，有一个小问题，似乎很多朋友都忽略了，那就是版权声明的写法。虽然那只是一小行字，不过作为设计师也好，作为个人的爱好也好
- 小毅的blog：http://andymao.com/前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一
- 大家都知道对于一个页面来说，最基本的结构呢就是<html> <head> <!-- 头部信息内容区域
- ORA-00600:internal error code,arguments:[num],[?],[?],[?],[?]产生原因：这种错误
- ajax编程获取Google的PageRank3(PR值)及所在目录，想给你的站增加Google PR查询的功能吗？如果你不会就看看本文吧，
- 移动互联网被称为“第五次科技革命”，而随着iPhone和Android等智能手机的日渐流行和iPad等平板电脑的出现，移动互联网的潜力和趋势
- 除了第一年外，谷歌每年母亲节都会更换主页的logo以向全世界的母亲致敬。虽然2000年和2001年母亲节的logo图片看起来没什么不同，但是
- 进行访问MySQL数据库的方法有很多种，下面将向大家介绍一些很简单实用的用的方法和示例与大家一起分享。方法一：使用MYSQL推出的MySQL
- 什么是存储过程呢？定义：将常用的或很复杂的工作，预先用SQL语句写好并用一个指定的名称存储起来, 那么以后要叫数据库提供与已定义好的存储过程
- xmlhttp，IE不支持overrideMimeType()方法，即使是IE7。 // Mozilla/Safari/
- 表单的验证是开发WEB应用程序中常遇到的一关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等，这时候就要用到表单验
- 1．建立Recordset对象 代码如下:Dim objMyRst Set objMyRst=Server.C
- 8. 使用DECODE函数来减少处理时间使用DECODE函数可以避免重复扫描相同记录或重复连接相同的表. 例如: SELECT COUNT(
