关于css class与id的命名 比较通用的名字

转自:http://jakewljoxygen.spaces.live.com/blog/cns!9b827d074e559d7f!438.entry

常用的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进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如
.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

———————————————————-

Gik 注:

———————————————————-

今天无意中看到的, 想起大堆页面共用一个css文件时那错综复杂的名字…..
觉得,一套易于理解切相对通用的命名规则还是很有用的

这一套感觉比较全一些 就收过来了

下面是另一套 也不错

———————————————————–

转自:http://www.j2box.com/blog/post/17.html

CSS 命名规范

CSS 命名规范

XHTML-CSS写作建议

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

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

Read: 862

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注