一、命名规则说明
- 所有的命名最好都小写
- 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
- 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
- 空元素要有结束的tag或于开始的tag后加上"/"
- 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
- <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
- 给每一个表格和表单加上一个唯一的、结构标记id
- 给图片加上alt标签
- 尽量使用英文命名原则
- 尽量不缩写，除非一看就明白的单词
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的性能
- 定位属性（位置属性）：position display float clear top right bottom left overflow z-index
- 自身属性（盒子属性）： margin padding border width height background box-sizing outline
- 文字样式：font-family font-size font-style font-weight font-varient color
- 文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
- 其他属性（CSS3 属性）：content cursor border-radius box-shadow text-shadow background transform……
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
