HTML页面CSS书写规范

HTML页面CSS书写规范
一、结构说明
1.1、<link type=”text/css” rel=”stylesheet” href=”css/common.css” media=”all” />为调用外部样式表。
1.2、<script type=”text/javascript” src=”js/prototype.js”></script>为调用外部的javascript文件。
1.3、页面内嵌样式表请在html中的<head></head>之间自行添加。<style type=”text/css”>……</style>
1.4、页面内嵌javascript请在html中的<head></head>之间自行添加<style type=”text/javascript”>……</style>
1.5、如无特殊需要，请尽量避免在html内部添加css和javascript，应统一采用外部链接的方式进行调用。

二、代码说明
2.1、所有标签必须关闭，如果是单独不成对的标签，在标签最后添加” / ”来关闭。例如：成对标签 <strong></strong>,<tr></tr>不成对标签 <br /> ,<hr />, <input type=”text” />,<img src=”logo,gif” alt=”logo“ />
2.2、标签的元素和属性名必须小写,避免大写及大小写夹杂。<BODY>必须写成<body>, “onmouseover”必须写成 “onmouseover”
2.3、所有标签必须采用合理嵌套。例如：<p><b></p></b> 必须改为 <p><b></b></p>
2.4、所有属性必须添加引号，例如： <div id=mainframe></div> 必须写成 <div id=”mainframe”></div>
2.5、所有html页面都必须调用此共享css文件。common.css
2.6、所有css属性和值必须采用小写的形式如：FONT-SIZE:12PX;必须改为font-size:12px;
2.7、所有css值的后面必须加分号结束，如：background:#FFF 必须写成 background:#FFF;
2.8、定义字体大小时，如果值是0的时候，可以省略单位（px,em,%等），其余情况必须添加相应的单位。统一使用：px
2.9

三、CSS命名参考

1、常用的CSS命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column

2、直观命名

当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：

自上而下小组：top-panel

横向：horizontal-nav

左面：left-side

中心-栏目：center-column

右面：right-col

这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。

但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。

3、结构化命名

结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。

有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。

可以按照如下所示的结构化方式来对类以及id名称命名：

顶部抢眼部分：branding

导航部分：main-nav

主要内容部分：main-content

这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。

即使你不打算在其他的媒体上对Web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。

4、惯例

Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：

header

content

nav

sidebar

footer

如果要查看完整的列表，可以看看最常见命名惯例表

这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢？尽管这是我所希望的，但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时，使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便，尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。

review:

大的布局div可以以外观的方式命名(如header,footer)，其他的我觉得还是应该以描述所含内容的标准来命名（如menu，news）

5、自定义命名：

根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

相关文章