1 前端开发命名规范
1.1 为什么要制定CSS命名规范
统一的命名规范,便于多人开发维护时代码统一,减少项目沟通和交接的成本,增加代码的语义化。
1.2 CSS命名规则
-
样式类名全部用小写,首字符必须是字母,禁止数字或其他特殊字符。由以字母开头的小写字母
(a-z)
、数字(0-9)
、中划线(-)
组成。 -
可以是单个单词,也可以是组合单词,要求能够描述清楚模块和元素的含义,使其具有语义化。避免使用
123456…,red,blue,left,right
之类的(如颜色、字号大小等)矢量命名,如class="left-news"、class="2"
,以避免当状态改变时名称失去意义。尽量用单个单词简单描述class名称。 -
双单词或多单词组合方式:形容词-名词、命名空间-名次、命名空间-形容词-名词。例如:
news-list、mod-feeds、mod-my-feeds、cell-title
1.3 Class 和 id的使用方法
把id留给后台开发和JS使用,除此之外页面的page id(如首页的外层需要一个ID id="pageIndex"
),页面结构(header main footer)允许用id命名(ID命名建议使用驼峰命名)。其他禁止id使用在样式表CSS命名中,一律使用class命名。
1.4 命名空间
在编码思想上,我们可以将页面拆分成不同的层级(布局、模块、元件)。
什么是CSS命名空间?
通过统一的命名规范定义命名的范围,成为CSS class & id命名空间。
布局: 以语义化的单词layout作为命名空间,例如主栏布局命名 layout-main,只改变layout-命名空间后面的命名,layout始终保留。布局的命名空间为layout-xxx。
模块:页面是由一个或多个模块组成,模块的英文单词是module,规范简写成mod,如新闻模块mod-news
,照片展示模块mod-photo-show
。模块的命名空间为mod-xxx
。
元件:元件是属于模块内部的,也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell-user-photo
。元件的命名空间为cell-xxx
。
1.5 通用命名
(1)页面框架命名,一般具有唯一性,推荐用ID命名
ID名称 | 命名 | ID名称 | 命名 |
---|---|---|---|
头部 | header | 主体 | main |
脚部 | footer | 容器 | wrapper |
侧栏 | sideBar | 栏目 | column |
布局 | layout |
(2)模块结构命名
Class名称 | 命名 | Class名称 | 命名 |
---|---|---|---|
模块(如:新闻模块) | mod (mod-news) | 标题栏 | title |
内容 | content | 次级内容 | sub-content |
(3)导航结构命名
Class名称 | 命名 | Class名称 | 命名 |
---|---|---|---|
导航 | nav | 主导航 | main-nav |
子导航 | sub-nav | 顶部导航 | top-nav |
菜单 | menu | 子菜单 | sub-menu |
(4)一般元素命名
Class名称 | 命名 | Class名称 | 命名 |
---|---|---|---|
二级 | sub | 面包屑 | breadcrumb |
标志 | logo | 广告 | bner(禁用banner或ad) |
登陆 | login | 注册 | register/reg |
搜索 | search | 加入 | join |
状态 | status | 按钮 | btn |
滚动 | scroll | 标签页 | tab |
文章列表 | list | 短消息 | msg/message |
当前的 | current | 提示小技巧 | tips |
图标 | icon | 注释 | note |
指南 | guide | 服务 | service |
热点 | hot | 新闻 | news |
下载 | download | 投票 | vote |
合作伙伴 | partner | 友情链接 | link |
版权 | copyright | 演示 | demo |
下拉框 | select | 摘要 | summary |
翻页 | pages | 主题风格 | themes |
设置 | set | 成功 | suc |
按钮 | btn | 文本 | txt |
颜色 | color/c | 背景 | bg |
边框 | border/bor | 居中 | center |
上 | top/t | 下 | bottom/b |
左 | left/l | 右 | right/r |
添加 | add | 删除 | del |
间隔 | sp | 段落 | p |
弹出层 | pop | 公共 | global/gb |
操作 | op | 密码 | pwd |
透明 | tran | 信息 | info |
重点 | hit | 预览 | pvw |
单行输入框 | input | 首页 | index |
日志 | blog | 相册 | photo |
留言板 | guestbook | 用户 | user |
确认 | confirm | 取消 | cancel |
报错 | error |
(5)全局皮肤样式
文字颜色(命名空间text-xxx)
text-c1, text-c2,text-c3……
背景颜色(命名空间bg -xxx)
bg-c1,bg-c2,bg-c3……
边框颜色(命名空间border-xxx)
border-c1,border-c2,border-c3……
浮动
右浮动 fr 左浮动 fl