CSS 命名规范

这段时间由于工作的需要对CSS的命名做了一些研究，主要是想让作出的文档等规范，更能让人看懂和读懂。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css命名规范</title>
<style type="text/css">
/******************************************************************
* 名称: css命名规范 
* 作者网名: gulu77 
* 创建日期: 2007-1-10 
* 最近修改: 2007-1-16 by gulu77 
******************************************************************/
<!--
body{ background:#000000; margin:0; padding:0;}
h1{ text-align:center}
h2{ font: bold 14px "Arial";}
#content{ margin:10px 20px; padding:10px; text-align:left; font: 12px Arial; background:#FFFFFF;}
table{ width:80%; padding:10px; text-align:left; background:#eee;}
th{color:#f00; background:#FFF}
td{background:#FFF}
b{ color:#000;}
-->
</style>
</head>
<body>
<div id="content">
<h1>CSS 命名规范</h1>
<h2>XHTML-CSS写作建议</h2>
<ol>
<li>所有的xhtml代码小写</li>
<li>属性的值一定要用双引号("")括起来，且一定要有值</li>
<li>每个标签都要有开始和结束，且要有正确的层次</li>
<li>空元素要有结束的tag或于开始的tag后加上"/"</li>
<li>表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等</li>
<li><h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。</li>
<li>给每一个表格和表单加上一个唯一的、结构标记id</li>
<li>给重要的区块加上注释,如：<!-- Begin Last news --> <!-- End Last news --></li>
<li>给图片加上alt标签</li>
<li>所有的标签必须进行合理的嵌套</li>
<li>根元素前必须有<!DOCTYPE>元素，宣告使用那一种DTD</li>
<li>根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace</li>
</ol>
<h2>CSS样式表规范：</h2>
<ol>
<li>id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release)</li>
<li>CSS样式表各区块用注释说明</li>
<li>尽量使用英文命名原则</li>
<li>尽量不加中杠和下划线</li>
<li>尽量不缩写，除非一看就明白的单词</li>
</ol>
<h2>CSS命名规范：</h2>
<table cellspacing="1" cellpadding="0" class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">
 <tr>
 <th width="40%"><b>DIV</b></th>
 <th width="30%"><b>CSS名称</b></th>
 <th width="30"><b>说明</b></th>
 </tr>
 <tr>
 <th colspan="3">网站公用相关</th>
 </tr>
 <tr>
 <td>Container div </td>
 <td>#container </td>
 <td>容器 </td>
 </tr>
 <tr>
 <td><div>Layout</div></td>
 <td>#layout</td>
 <td>布局</td>
 </tr>
 <tr>
 <td>Header or banner div </td>
 <td>#head, #header</td>
 <td>页头部分 </td>
 </tr>
 <tr>
 <td>Footer div </td>
 <td>#foot, #footer </td>
 <td>页脚部分 </td>
 </tr>
 <tr>
 <td>Navigation list </td>
 <td>#nav </td>
 <td>主导航 </td>
 </tr>
 <tr>
 <td>Sub-navigation list </td>
 <td>#subNav </td>
 <td>二级导航 </td>
 </tr>
 <tr>
 <td>Menu </td>
 <td>#menu </td>
 <td>菜单 </td>
 </tr>
 <tr>
 <td>Sub Menu </td>
 <td>#submenu </td>
 <td>子菜单 </td>
 </tr>
 <tr>
 <td>Left or right side columns </td>
 <td>#sidebar_a, #sidebar_b </td>
 <td>左边栏或右边栏 </td>
 </tr>
 <tr>
 <td>Main div </td>
 <td>#main </td>
 <td>页面主体 </td>
 </tr>
 <tr>
 <td>Tag </td>
 <td>#tag </td>
 <td>标签 </td>
 </tr>
 <tr>
 <td>Message </td>
 <td>#msg #message </td>
 <td>提示信息 </td>
 </tr>
 <tr>
 <td>Tips </td>
 <td>#tips </td>
 <td>小技巧 </td>
 </tr>
 <tr>
 <td>Vote </td>
 <td>#vote </td>
 <td>投票 </td>
 </tr>
 <tr>
 <td>Friend Link </td>
 <td>#friendlink </td>
 <td>友情连接 </td>
 </tr>
 <tr>
 <td>Title </td>
 <td>#title </td>
 <td>标题 </td>
 </tr>
 <tr>
 <td>Summary </td>
 <td>#summary </td>
 <td>摘要 </td>
 </tr>
 <tr>
 <td>Search input </td>
 <td>#searchInput </td>
 <td>搜索输入框 </td>
 </tr>
 <tr>
 <td>Search output </td>
 <td>#search_output </td>
 <td>搜索输出和搜索结果相似 </td>
 </tr>
 <tr>
 <td>Search </td>
 <td>#search </td>
 <td>搜索 </td>
 </tr>
 <tr>
 <td>Search results </td>
 <td>#search_results </td>
 <td>搜索结果 </td>
 </tr>
 <tr>
 <td>Copyright information </td>
 <td>#copyright </td>
 <td>版权信息 </td>
 </tr>
 <tr>
 <td>brand </td>
 <td>#branding </td>
 <td>商标 </td>
 </tr>
 <tr>
 <td>branding-logo </td>
 <td>#logo </td>
 <td>LOGO </td>
 </tr>
 <tr>
 <td>Site information </td>
 <td>#siteinfo </td>
 <td>网站信息 </td>
 </tr>
 <tr>
 <td>Copyright information etc. </td>
 <td>#siteinfoLegal </td>
 <td>法律声明 </td>
 </tr>
 <tr>
 <td>Designer or other credits </td>
 <td>#siteinfoCredits </td>
 <td>信誉 </td>
 </tr>
 <tr>
 <td>Join us </td>
 <td>#joinus </td>
 <td>加入我们 </td>
 </tr>
 <tr>
 <td>Partnership opportunities </td>
 <td>#partner </td>
 <td>合作伙伴 </td>
 </tr>
 <tr>
 <td>Services </td>
 <td>#service </td>
 <td>服务 </td>
 </tr>
 <tr>
 <td>Regsiter </td>
 <td>#regsiter </td>
 <td>注册 </td>
 </tr>
 <tr>
 <td>Arrow</td>
 <td>arr/arrow</td>
 <td>箭头</td>
 </tr>
 <tr>
 <td>Little</td>
 <td>#little</td>
 <td>标题</td>
 </tr>
 <tr>
 <td><div>Website map</div></td>
 <td>#sitemap</td>
 <td>网站地图</td>
 </tr>
 <tr>
 <td>List</td>
 <td>#list</td>
 <td>列表</td>
 </tr>
 <tr>
 <td>Home page</td>
 <td>#homepage</td>
 <td>首页</td>
 </tr>
 <tr>
 <td>Sub page</td>
 <td>subpage</td>
 <td>二级页面子页面</td>
 </tr>
 <tr>
 <td>Toolbar</td>
 <td>#tool, #toolbar </td>
 <td>工具条</td>
 </tr>
 <tr>
 <td><div>Next pulls</div></td>
 <td>#drop</td>
 <td>下拉</td>
 </tr>
 <tr>
 <td>Next pulls menu </td>
 <td>#dorpmenu</td>
 <td>下拉菜单</td>
 </tr>
 <tr>
 <td>Status </td>
 <td>#status </td>
 <td>状态 </td>
 </tr>
 <tr>
 <th colspan="3">电子贸易相关</th>
 </tr>
 <tr>
 <td>Products </td>
 <td>.products </td>
 <td>产品 </td>
 </tr>
 <tr>
 <td>Products prices </td>
 <td>.products_prices </td>
 <td>产品价格 </td>
 </tr>
 <tr>
 <td>Products description </td>
 <td>.products_description </td>
 <td>产品描述 </td>
 </tr>
 <tr>
 <td>Products review </td>
 <td>.products_review </td>
 <td>产品评论 </td>
 </tr>
 <tr>
 <td>Editor's review </td>
 <td>.editor_review </td>
 <td>编辑评论 </td>
 </tr>
 <tr>
 <td>New release </td>
 <td>.news_release </td>
 <td>最新产品 </td>
 </tr>
 <tr>
 <td>Publisher </td>
 <td>.publisher </td>
 <td>生产商 </td>
 </tr>
 <tr>
 <td>Screen shot </td>
 <td>.screenshot </td>
 <td>缩略图 </td>
 </tr>
 <tr>
 <td>FAQ </td>
 <td>.faqs </td>
 <td>常见问题 </td>
 </tr>
 <tr>
 <td>Keyword </td>
 <td>.keyword </td>
 <td>关键词 </td>
 </tr>
 <tr>
 <td>Blog </td>
 <td>.blog </td>
 <td>博客 </td>
 </tr>
 <tr>
 <td>Forum </td>
 <td>.forum </td>
 <td>论坛 </td>
 </tr>
</table>
</div>
</body>
</html>

Asp教程

通过asp实例结合结合ACCESS,MSSQL来更好的深入Asp学习 - 爬坡者

导航

2007-8-26 3:21:17

Tags: div-css布局 代码写作规范

发布:asp教程 | 分类:WEB2.0网站重构 | 评论:0 | 引用:0 | 浏览:

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710

Copyright 2007-2008 papozhe.com [asp教程] All Rights Reserved.
浙ICP备07030537号
免责申明：所有文章除特别声明，均来自网上，主要为学习用！内容仅供参考，版权归原作者。如侵犯您利益，请来信告知.
Email:papozhe$Gmail.com QQ:76336503

Asp教程

通过asp实例结合结合ACCESS,MSSQL来更好的深入Asp学习 - 爬坡者

导航

2007-8-26 3:21:17

CSS 命名规范

Tags: div-css布局 代码写作规范

发布:asp教程 | 分类:WEB2.0网站重构 | 评论:0 | 引用:0 | 浏览: strBatchCount+="spn401=401,"

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710

Copyright 2007-2008 papozhe.com [asp教程] All Rights Reserved.浙ICP备07030537号免责申明：所有文章除特别声明，均来自网上，主要为学习用！内容仅供参考，版权归原作者。如侵犯您利益，请来信告知.Email:papozhe$Gmail.com QQ:76336503

Tags: div-css布局代码写作规范

发布:asp教程 | 分类:WEB2.0网站重构 | 评论:0 | 引用:0 | 浏览:

Copyright 2007-2008 papozhe.com [asp教程] All Rights Reserved.
浙ICP备07030537号
免责申明：所有文章除特别声明，均来自网上，主要为学习用！内容仅供参考，版权归原作者。如侵犯您利益，请来信告知.
Email:papozhe$Gmail.com QQ:76336503