css 规范

1. 命名规范

id 和 class
- 三种命名(用英文，尽量不缩写)
  - 驼峰: topMain, subLeftMenu
  - (id 用)中划线: top-main, sub-left-menu
  - (class 用)下划线: top_main, sub_left_menu
组合方式：
- 命名空间-形容词-块-元素--特殊形容词
命名空间
- 布局：以 layout 开头
- 模块：以 mod 开头
- 元件：以 cell 开头
形容词

形容词方位

top 顶

main 主

sub 子

side 边
- 避免用某些位词，比如 left/right
- 多改用语义词，比如 main/side
块-名词
- 结构性块
结构名词结构名词结构名词

整页 wrapper

头部 header 导航 nav 脚部 footer

主体 main

侧栏 sidebar 容器 container 栏目 column
- 功能性块功能 | 名词 | 功能 | 名词 | 功能 | 名词
- | - | - | - | - | - 登录 | login | 注册 | register | 搜索 | search 指南 | guild | 列表 | list | 链接 | link 按钮 | btn | 密码 | pwd | 广告 | banner
- 前置功能性块功能 | 名词 | 功能 | 名词 | 功能 | 名词
- | - | - | - | - | - 标志 | logo- | 图标 | icon- | 背景 | bg-
元素-名词元素 | 名词 | 元素 | 名词 | 元素 | 名词
- | - | - | - | - | - 项 | -item 头部 | -hd | 标题 | -title | 底部 | -btm 内容 | -cont

按如下 4 种类型，顺序书写

位置类

position:
(top/right/bottom/left):
transform: translate(x,y)
display:
align-items:
justify-content:
float:
overflow-x/y:
z-index:

尺寸类

box-sizing:content-box/border-box
width/height: vh/vw/100%
margin/padding/border:

字体类：

font-(family/size/weight):
line-height:
text-indent:
text-align:
vertical-align:
white-space:
text-overflow:

颜色类

color:
background-color:
background-(size/position/image/repeat):
opacity:
cursor: