谈谈CSS样式表的命名规范
作者:Kenny 来源:a-fei.net 发布时间:2007-10-08 12:41:00
最近和一程序员合作项目。弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来。结果我打开他的页面,看了看,从头第一个开始就是contentCommon,下面全部是content****. 我说明了我的理由,过了半会,似乎是接受了,却突然来一句:“不要用H标签嘛!还有不要用UL来定义导航等“。
对于很多合作过的程序员,大多都是这样,命名规范大多是自成一派。对于制作标准更是视而不见。抱着只照顾IE正常浏览的态度叫嚣着”让FIREFOX和SAFARI见鬼去吧!”
命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如content-title
直观命名
当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:
●top-panel
●horizontal-nav
●left-side
●center-column
●right-col
这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义,因此满足了标识页面元素以及相应的CSS样式的需要。
但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置,因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时,这些命名没有涉及文档内容的结构。因此,下面给出了对CSS类以及ID命名更好的方法。
结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记(markup)中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容(content)以及标记(markup)进行重用。当你理解这种方式时,很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频(audio)等外观格式上显得非常不合适。因此,应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名:
●branding
●main-nav
●subnav
●main-content
●sidebar
这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记(structural markup)的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。
惯例
最常用类/id名称的示例列表:
●header
●content
●nav
●sidebar
●footer
常用标签:
div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助
h1-h6:标题
h1-h6 根据重要性依次递减
h1位最重要的标题
label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西
<label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />
(XHTML 1.0 Strict 下不能通过,可以使用"p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre",
"address", "fieldset", "ins", "del" )
dl dd dt 定义列表,当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签
<dl>
<dt>猫
<dd>一种可供饲养的小宠物。
<dt>蜥蜴
<dd>通常可在干燥区域发现的爬行动物。
</dl>
原文:http://a-fei.net/blog/article.asp?id=124
猜你喜欢
- 写过一篇"正则表达式30分钟入门教程",有读者问:[^abc]表示不包含a、b、c中任意字符, 我想实现不包含字符串ab
- WEB程序员的技能要求: Web程序员不光要对 后端程序(如 php,jsp,asp.net)语言知识,对程序设计架构知识,数据库
- 在一些网页应用中,就比如在投票系统中,当我们进行的是多项投票时,我们要求用户最多只能选择几项进行投票,这也是就是说选择复选框的个数最多几个.
- 1.将下面一段代码插入<head>与</head>之间:<script> function&
- 在开发和调试基于XML的应用的时候,程序员往往为找不到合适的快速桌面XPATH测试软件发愁。诚然,市面上有成套的XML编辑软件,但是它们往往
- 问题:导入数据时是否需要禁用索引?解答:在使用load data导入数据时,如果导入的表是MyISAM的,对于空表,MySQL数据库会把所有
- 大家一定使用过 phpmyadmin 里面的数据库导入,导出功能,非常方便。但是在实际应用中,我发现如下几个问题:1、数据库超过一定尺寸,比
- 最近试用mysql proxy,遇到若干问题,好在一一找到了解决方案,列出来备忘。这次使用的版本是0.6.x,也许新版本就没有这些问题了。无
- 在编程时你一定碰到过时间触发的事件,在VB中有timer控件,而ASP中没有,假如你要不停地查询数据库来等待一个返回结果的话,我想你一定知道
- A.截取从字符串左边开始N个字符 Declare @S1 varchar(100) Select @S1='http://www.x
- 1.SQL Server 2005中的存储过程并发问题问:我在SQL Server2005中遇到了并发问题。我持有车票的公共汽车上有一些空闲
- 其实不光是上面描述的情况会锁住表,还有很多种场景会使表放生死锁,解锁其实很简单,下面用一个示例来讲解: 1 首先创建一个测试用的表: 代码如
- 下一代的 web 已经开始上路了,就在这个星期,MySpace 集成了 Google Gears,雅虎发布了新的 BrowserPlus,G
- 阅读上一篇:FrontPage2002简明教程三:网页布局 网页的强大之处就在它的超链接,在浏览器中通过点击网页中的超链接,可以很方便地打开
- 学习目的: 掌握最基本的Label、TextBox、Button控件用法 掌握用StringBuider类连接字符串 理解服务器的环境变量
- 又发一个js版幻灯片,接口比较少,但功能和外观都还不错的,可自定义切换时间:)method: adRotator.initialize(容器
- 互联网上的资源多不胜数,无论我们搜索资料还是查阅新闻,或者是在网上淘物等等,肯定没少见分页!分页模式和表现方法也是各有千秋。我们来看看下面这
- 方法1: 代码如下:truncate table TableName 删除表中的所有的数据的同时,将自动增长清零。 如果有外键参考这个表,这
- 在MySQL经历了2008年Sun的收购和2009年Oracle收购Sun的过程中,基本处于停滞发展的情况,在可以预见的未来,MySQL是肯
- © 版权符号显示不清楚,就是那个圈C,在某些网站上就是显示太小,看不清楚。一开始还以为是字体大小的原因,调大以后,还是一样