div+css命名规则

作为一个前端菜鸟，进公司的第一个项目就是中途从外包公司接过来的公司网站，在别人写过了的基础上接着写，命名什么的，简直不要太痛苦。

目前，这个网站已经完成，但是被后台人员指出命名不规范。有心想解释一两句，但是又觉得的这一个月在命名上的折腾，的确让我对命名规范都模糊了不少。

在看了一些css样式命名规则后，我做了一些笔记。

一、命名规则说明

1.所有的命名最好都小写
2.属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
3.每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4.空元素要有结束的tag或于开始的tag后加上"/"
5.表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
6.<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7.给每一个表格和表单加上一个唯一的、结构标记id
8.给图片加上alt标签
9.尽量使用英文命名原则
10.尽量不缩写，除非一看就明白的单词
11.在外框楼层太多，无法具体命名的情况下，可以使用af、bf、cf来区别命名

二、相对网页外层重要部分CSS样式命名

外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部

三、注释

/* Header */
内容区
/* End Header */

四、常用的css命名

页面外围控制整体佈局宽度：wrapper
布局：layout
头部：header/head
底部：footer/foot
导航：nav 二级导航：subnav
侧边栏：sidebar 左侧边栏：leftsidebar 右侧边栏：rightsidebar
栏目：column
主要内容区：main 内容区：content/container
菜单：menu 子菜单：submenu
左右中：left right center
登录：login
登录条：loginbar
标志：logo
广告：banner
热点：hot
新闻：news
箭头：arr/arrow
下载：download
搜索：search
搜索输入框：searchInput
搜索结果：search_result
搜索条：searchbar
友情链接：friendlink
滚动：scroll
下拉：drop
下拉菜单：dropmenu
标签：tags
文章列表：list
提示信息：msg/message
摘要：summary
当前的: current
小技巧：tips
图标: icon
注释：note
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
常见问题：faqs
编辑评论：editor_review
关键词：keyword
博客：blog
论坛：forum
合作伙伴：partne
网站信息：siteinfo
网站地图：sitemap
版权：copyright
商标：branding

下面是一些关于产品类的命名：

产品：products/product
产品价格：products_prices
产品描述：products_description
产品评价：products_review
最新产品：news_release
生产商：publisher
缩略图：screenshot

注意：

在命名时使用id还是class都可以，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用id命名，其它都用class命名，同时考虑命名的css选择器在HTML中的可重用性。