CSS | 命名规范小记

页面主要分为框架，模块，元件组成。

框架

框架是指构成页面的基础结构，它是一个页面的筋骨。
命名以 g- 开头，最外层类名一般与页面同名

例子：
index.html
最外围的 div => .g-index
页头 => .g-hd
主体 => .g-bd
页脚 => .g-ft

---

模块

模块是是代码复用的主体部分，是一个个按照功能划分的区域，如导航栏、轮播图、登录窗口、信息列表等等
命名以 m- 开头，一般以相对应的用途来命名

例子
导航栏 => .m-nav
轮播图 => .m-slide

---

元件

元件是独立的、可重复使用的，并且在某些情况下可以作为模块的组成部分的一种细颗粒
命名以u-开头，一般以自身含义来命名

例子
按钮 => .u-btn
logo => .u-logo

---

补充

• z- 开头表示状态，如z-active、z-succ、z-disabled等等
• 前缀与名称之间用-连接，而名称之间的若干单词以_连接，组合单词除外，如side-menu；

---

原文链接