CSS（23）CSS样式表命名参考表

一、命名规则说明

1. 所有的命名最好都小写
2. 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
3. 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4. 空元素要有结束的tag或于开始的tag后加上"/"
5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6. 到

   的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7. 给每一个表格和表单加上一个唯一的、结构标记id
8. 给图片加上alt标签
9. 尽量使用英文命名原则
10. 尽量不缩写，除非一看就明白的单词

1、DIV+CSS命名小结

主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

二、内容命名参考

1、页面结构类

• 面板：dashboard
• 容器：container
• 页头：header
• 内容：content
• 外围控制：wrapper
• 页面主体：main
• 栏目：column
• 宽栏目：wide_column
• 窄栏目：narrow_column
• 栏：bar
• 侧边栏：sidebar
• 网站地图：sitemap
• 页尾：footer
• 标签页：.tab
• 居左、中、右：.left .right .center

2、导航类

• 主导航：nav_main
• 子导航：nav_child,subnav
• 三级导航：nav_third
• 导航：nav
• 顶导航：nav_top
• 左导航：nav_left
• 右导航：nav_right
• 菜单：menu
• 子菜单：menu_child
• 下拉菜单：menu_drop
• 位置导航：crumb
• 面包屑：breadcrumb
• 标题: title
• 摘要: summary

3、表单

• 邮件：mail
• 用户名：username
• 密码：passwd
• 重复密码：passwd_again
• 保存信息：cookie
• 性别：sex
• 地点：local
• 下拉：drop
• 验证码：verification
• 按钮：btn
• 必填项：requisite
• 状态：status

4、功能模块

• 登录：
  login
• 注册：regsiter
• 搜索：search
• 标签页：tab
• 工具条：toolbar
• 标签页：tab
• 日历：calendar
• 分类：category
• 归档：archive
• 回复：comment
• 标签：tag
• 投票：vote
• 合作伙伴：partner
• 友情链接：friendlink
• 新闻：news
• 下载：download
• 指南：guild
• 帮助：help
• 常见问题：faq
• 服务：service

5、内容

• 注释：note
• 条目：entry
• 摘要：summary
• 缩略图：screenshot
• 提示信息：msg
• 小技巧：tips
• 正方形的：Square
• 极小的：Thumbnail
• 小的：Small
• 中等的：Medium
• 大的：Large
• 原始的：Original

6、动作

• 滚动：scroll
• 箭头：arrow
• 首页：first
• 上一页：prev
• 下一页：next
• 末页：last
• 更早的：older
• 更新的：newer

7、状态

• 列表：list
• 热点：hot
• 更新：new
• 前十列表：topten_list
• 相关列表：related_list
• 更新列表：update_list

三、CSS样式文件命名

• 基本共用，全局样式表： base.css
• 主要的： master.css, style.css, main.css
• 布局，版面： layout.css
• 专栏： columns.css
• 文字： font.css
• 打印： print.css
• 主题： themes.css
• 附加： attach.css
• 模块： module.css
• 表单： forms.css
• 补丁： mend.css

四、CSS样式的书写顺序

按照以下1 2 3 4 5的顺序进行书写。

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

1. 定位属性（位置属性）：position  display  float  clear    top  right  bottom  left  overflow  z-index
2. 自身属性（盒子属性）： margin padding  border  width  height   background box-sizing outline
3. 文字样式：font-family   font-size   font-style   font-weight   font-varient   color  
4. 文本属性：text-align   vertical-align   text-wrap   text-transform   text-indent    text-decoration   letter-spacing    word-spacing    white-space   text-overflow
5. 其他属性（CSS3 属性）：content   cursor   border-radius   box-shadow  text-shadow   background transform……