本系列HTML+CSS入门学习笔记将给大家系统的讲解一些CSS的入门信息 ，看完这系列文章会让你对CSS有更加清晰的理解和运用。

引言：最近想将这几个月做过的东西组件化，然后首先想到的是 编码规范化！本文只涉及 CSS 命名规范，搬来了Alloyteam 造好的轮子。可能并不完全适用，在以后开发过程中再根据需要进行修改。╮(╯_╰)╭

1.常用的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

2.注释的写法

/* Footer */

内容区

/* End Footer */

3.id的命名

3.1 页面结构

· 容器: container

· 页头：header

· 内容：content/container

· 页面主体：main

· 页尾：footer

· 导航：nav

· 侧栏：sidebar

· 栏目：column

· 页面外围控制整体布局宽度：wrapper

· 左右中：left right center

3.2 导航

· 导航：nav

· 主导航：mainnav

· 子导航：subnav

· 顶导航：topnav

· 边导航：sidebar

· 左导航：leftsidebar

· 右导航：rightsidebar

· 菜单：menu

· 子菜单：submenu

· 标题: title

· 摘要: summary

3.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

4.class的命名

4.1 颜色

使用颜色的名称或者十六进制。

举例：

.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

4.2 字体大小

直接使用 font+字体大小 作为名称。

举例：

.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

4.3 对齐样式

使用对齐目标的英文名称。

举例：

.left{float:left;}
.bottom{float:bottom;}

4.4 标题栏样式

使用 类别+功能 的方式命名。

举例：

.barnews{}
.barproduct{}

5.注意事项

1. 一律小写；

2. 尽量用英文；

3. 不加中杠和下划线；

4. 尽量不缩写，除非一看就明白的单词。

6.常用css文件命名

· 主要的 master.css

· 模块 module.css

· 基本共用 base.css

· 布局，版面 layout.css

· 主题 themes.css

· 专栏 columns.css

· 文字 font.css

· 表单 forms.css

· 补丁 mend.css

· 打印 print.css

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！