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

后记：搬到最后，看到注意事项里面的一条：不加中杠和下划线。Σ(っ °Д °;)っ有点接受不了。。。而后继续搜索，发现一个好东西—— BEM！而后，我放下最后一块砖头，滚去学习了，再见(。・_・)/~~~

---

参考资料

• 关于团队合做的css命名规范 - 腾讯AlloyTeam Blog
• 编写可维护的CSS - SegmentFault
• BEM + Emmet = 根本停不下来 - SegmentFault
• CSS编码规范 - SegmentFault
• BEM —— 源自Yandex的CSS 命名方法论 - SegmentFault