首页 > 代码库 > CSS 命名规范及标题供参考与学习
CSS 命名规范及标题供参考与学习
一、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#brandingLogoLOGOSite 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论坛
二、CSS 命名标准
(一)常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
1 2 3 4 5 | .red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; } |
(2)字体大小,直接使用"font+字体大小"作为名称,如
1 2 3 | .font12px { font-size: 12px; }.font9pt {font-size: 9pt; } |
(3)对齐样式,使用对齐目标的英文名称,如
1 2 3 | .left { float:left; }.bottom { float:right; } |
(4)标题栏样式,使用"类别+功能"的方式命名,如
1 2 3 | .barnews { }.barproduct { } |
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
CSS 命名规范及标题供参考与学习