网页制作 谈谈CSS样式表的命名规范

css|规范|网页|样式表

  最近和一程序员合作项目。弄的我头都大了~埋怨我的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>

时间: 2024-08-22 15:22:32

网页制作 谈谈CSS样式表的命名规范的相关文章

如何在网页中插入CSS样式表

  本例为CSS入门系列教程,在这一课中我们将学习如何在网页中插入CSS样式表,主要学习在页面中插入链入外部样式表.内部样式表.导入外表样式表和内嵌样式的四种方法,另外作者还讲解了多重样式表的叠加的运用以及如何在xml中插入CSS,希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之如何在网页中插入CSS样式表 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内

入门:在网页中使用CSS样式表的四种方法

css|网页|样式表 如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下: <head> -- <link

发现四种在网页中使用CSS样式表的方法_经验交流

如何在网页中插入CSS  前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式.  1. 链入外部样式表  链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下:  复制代码 代码如下: <head>   --  

DreamWeaver设计网页之应用CSS样式表技巧两则

css|dreamweaver|技巧|设计|网页|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"

网页编辑中CSS样式表技巧总结_经验交流

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

入门:在网页中使用CSS样式表的2种方法

如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下:  代码如下 复制代码 <head> -- <link

网页中使用CSS样式表的四种方式介绍

css|网页|样式表 一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签

网页中使用CSS样式表的五种方法

css|网页|样式表 一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签

技巧:同一网页实现多种CSS 样式表切换

css|技巧|网页|样式表 样式与数据分离所带来的不只是符合标准这样的简单,样式既然与数据分离那么样式的切换则变得理所当然的了!但是网上这样的中文教程实在是太少了!所以我收集了一部分中外网站已经实现的技术资料整理出来供网友参考. 首先要具备不同内容的CSS文件(最好每个文件代表一种样式,或是代表需要作出变动的部分).这里以三个为例: 第一个是背景为红色的CSS文件(red.css)CSS中的内容为:body {background-color:red;} 第二个是背景为绿色的CSS文件(gree