当前位置: 做网站的教程/建网站的教程 >> >> 建网站CSS样式表的命名规范
建网站CSS样式表的命名规范

  作者:  来源:互联网  浏览次数:2  文字大小:【】【】【
 

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

责任编辑:王眉

打印本文  发表评论  推荐本文  返回顶部  加入收藏  关闭窗口

相关文章