CSS命名规范

XHTML-CSS写作建议

• 所有的xhtml代码小写
• 属性的值一定要用双引号("")括起来，且一定要有值
• 每个标签都要有开始和结束，且要有正确的层次
• 空元素要有结束的tag或于开始的tag后加上"/"
• 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
• <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
• 给每一个表格和表单加上一个唯一的、结构标记id
• 给重要的区块加上注释,如：
• 给图片加上alt标签
• 所有的标签必须进行合理的嵌套
• 根元素前必须有元素，宣告使用那一种DTD
• 根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace

CSS样式表规范：

• id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release)
• CSS样式表各区块用注释说明
• 尽量使用英文命名原则
• 不用加中杠和下划线
• 尽量不缩写，除非一看就明白的单词

CSS命名规范

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

DIV	CSS名称	说明
网站公用相关
Container div	#container	容器
Header or banner div	#header	页头部分
Main or global navigation div	#mainNav	主导航
Menu	#menu	菜单
Sub Menu	#submenu	子菜单
Left or right side columns	#sidebarA, #sidebarB	左边栏或右边栏
Main div	#main	页面主体
Content div	#content	内容部分
The main content area	#contentMain	主要内容区域
Footer div	#footer	页脚部分
Tag	#tag	标签
Message	#msg #message	提示信息
Tips	#tips	小技巧
Vote	#vote	投票
Friend Link	#friendlink	友情连接
Title	#title	标题
Summary	#summary	摘要
Sub-navigation list	#subNav	二级导航
Search input	#searchInput	搜索输入框
Search output	#searchOutput	搜索输出和搜索结果相似
Search	#search	搜索
Search results	#searchResults	搜索结果
Copyright information	#copyright	版权信息
brand	#branding	商标
branding-logo	#brandingLogo	LOGO
Site information	#siteinfo	网站信息
Copyright information etc.	#siteinfoLegal	法律声明
Designer or other credits	#siteinfoCredits	信誉
Join us	#joinus	加入我们
Partnership opportunities	#partner	合作伙伴
Services	#service	服务
Regsiter	#regsiter	注册
Status	#status	状态
电子贸易相关
Products	.products	产品
Products prices	.productsPrices	产品价格
Products description	.productsDescription	产品描述
Products review	.productsReview	产品评论
Editor's review	.editorReview	编辑评论
New release	.newsRelease	最新产品
Publisher	.publisher	生产商
Screen shot	.screenshot	缩略图
FAQ	.faqs	常见问题
Keyword	.keyword	关键词
Blog	.blog	博客
Forum	.forum	论坛

 

样式文件命名:

主要的　　　　 master.css

布局，版面 　　layout.css

专栏 　　　　　columns.css

文字　　　　　 font.css

打印样式　　　 print.css

主题 　　　　　themes.css 

提交 　　　　 submit.css

文本框        textbox.css

统计          count.css

 

样式文件布局:

 

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，然后在css中定义span

h1-h6：标题

h1-h6： 根据重要性依次递减

h1：最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西

fieldset & legend：fildset套在表单外，legend用于描述表单内容。

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签

 

样式自定义命名：

 

根据w3c网站上给出的,最好是用意义命名