CSS命名规范《一》(转载)

原文访问地址: http://hi.baidu.com/fy_wan/blog/item/149a58a7ea8c439dd04358e1.html

 

 

一．文件命名规范

全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；

二．常用类/ID命名规范

页　眉：header
内　容：content
容　器：container
页　脚：footer
版　权：copyright　
导　航：menu
主导航：mainMenu
子导航：subMenu
标　志：logo
标　语：banner
标　题：title
侧边栏：sidebar
图　标：Icon
注　释：note
搜　索：search
按　钮：btn
登　录：login
链　接：link
信息框：message

------

 

一些DIV+CSS 命名规范

外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footet
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

---------------------------

 

CSS样式表规范：

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

 

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	论坛