原子样式的分类多，数量多，适配多种浏览器，统一值转换，手工维护工作量较大，需要细化后进行管理。
1 样式组成
1.1 样式文件划分
global.css 全局样式文件
font.css 字体样式文件。由于字体文件较大，单独放在一个文件中
icon.css 图标文件。由于代码较多，单独放在一个文件中。
ext.[feature].css 扩展样式文件。对于不同项目可能使用不同的特效样式，可以将特效样式定义在单独的文件中。
[page].css 局部样式。保存具体页面新增的样式，可以每页面一个文件。
1.2 样式组成划分
样式文件中
reset.common.css 通用重置样式，适用于全部浏览器
reset.[browser].css 特定浏览器的重置样式。可以没有。
combine.component.css 常用组件样式，降级为原子样式。
combine.stage.css 常用场景样式，与特定设备或者环境有关。
atom.css 原子样式
resource.css 资源文件样式，包括图片、字体（@font-face指令）等
import.css 通过 @import 命令引入外部样式
1.3 文件与组成对照
每个样式文件根据需要只包含指定的样式部分。
组成/文件 |
global.css |
font.css |
icon.css |
ext.[feature].css |
[page].css |
reset.common.css |
Y |
||||
reset.[browser].css |
Y |
||||
combine.component.css |
Y |
Y |
Y |
||
combine.stage.css |
Y |
Y |
Y |
||
atom.css |
Y |
Y |
|||
resource.css |
Y |
Y |
|||
import.css |
Y |
Y |
2 原子样式命名规则
2.1 样式变量
样式变量定义复用的值，分为色彩、数字。
（1）色彩变量格式为：--[colorName]-[order]
分组 |
颜色 |
颜色名称 |
说明 |
色阶 |
基本色彩 |
白 |
white |
无 |
|
黑 |
black |
无 |
||
灰 |
gray |
5 |
||
红 |
red |
错误 |
5 |
|
黄 |
yellow |
警告 |
5 |
|
绿 |
green |
成功 |
5 |
|
蓝 |
blue |
提示 |
5 |
|
主题色彩 |
主题 |
primary |
无 |
|
紫色 |
purple |
5 |
||
品红 |
magenta |
5 |
||
橙色 |
orange |
5 |
||
金色 |
gold |
5 |
（2）数字变量格式为：--number-[N]
分组 |
数字 |
边框 |
1,2 |
元素间距 |
4,8,10,20,32 |
子元素间距 |
4,10,20 |
圆角 |
4,10,36 |
字体 |
20,24,28,36,48,72 |
图标 |
36,48,72,96,144 |
高度 |
10,20,96,150,200 |
最小高度 |
200 |
宽度 |
100 |
2.2 布局
样式分类 |
样式说明 |
语法 |
实现 |
浮动布局 |
绝对位置 |
pos-abs |
positon: absolute; |
相对位置 |
pos-rel |
position: relative; |
|
固定位置 |
pos-fix |
position: fixed; |
|
图层位置 |
z-[1|2|3|4|5|6] |
z-index: [1|2|3|4|5|6]; |
|
右上角位置 |
tr-n18 |
top: var(--number-n18); right: var(--number-n18); |
|
弹性布局 |
行 |
row |
display: flex; flex-direction: row; |
列 |
col |
display: flex; flex-direction: column; |
|
换行 |
wrap |
display: flex; flex-direction: wrap; |
|
反序行 |
row-r |
display: flex; flex-direction: column-reverse; |
|
反序列 |
col-r |
display: flex; flex-wrap: col-reverse; |
|
分列 |
c[1|2|3|4|5] |
-webkit-box-flex: [1|2|3|4|5]; -webkit-flex: [1|2|3|4|5]; flex: [1|2|3|4|5]; |
|
主轴对齐 |
上 |
ai-start |
-webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; |
中 |
ai-center |
-webkit-box-align: center; -webkit-align-items: center; align-items: center; |
|
下 |
ai-end |
-webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; |
|
此轴对齐 |
左 |
jc-start |
-webkit-justify-content: flex-start; justify-content: flex-start; |
中 |
jc-center |
-webkit-justify-content: center; justify-content: center; |
|
右 |
jc-end |
-webkit-justify-content: flex-end; justify-content: flex-end; |
|
顶边分散 |
jc-between |
-webkit-justify-content: space-between; justify-content: space-between; |
|
分散 |
jc-around |
-webkit-justify-content: space-around; justify-content: space-around; |
|
网格布局 |
2列均分 |
grid-2c |
display: grid; grid-template-columns: 1fr 1fr; |
3列均分 |
grid-3c |
display: grid; grid-template-columns: 1fr 1fr 1fr; |
|
4列均分 |
grid-4c |
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; |
|
5列均分 |
grid-5c |
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; |
|
2列12分 |
grid-2c-12 |
display: grid; grid-template-columns: 1fr 2fr; |
|
间隔 |
间隔32 |
gap-32 |
grid-gap: var(--number-32); |
间隔20 |
gap-20 |
grid-gap: var(--number-20); |
|
间隔10 |
gap-10 |
grid-gap: var(--number-10); |
|
间隔4 |
gap-4 |
grid-gap: var(--number-4); |
2.3 间距
样式分类 |
样式说明 |
语法 |
实现 |
外部间距 |
上下左右 |
m-[32|20|10] |
margin-left: var(--number-[32|20|10]); margin-right: var(--number-[32|20|10]); margin-top: var(--number-[32|20|10]); margin-bottom: var(--number-[32|20|10]); |
X轴左右 |
mx-[32|20|10] |
margin-left: var(--number-[32|20|10]); margin-right: var(--number-[32|20|10]); |
|
Y轴上下 |
my-[32|20|10] |
margin-top: var(--number-[32|20|10]); margin-bottom: var(--number-[32|20|10]); |
|
X轴左右自动 |
mx-auto |
margin-left: auto; margin-right: auto; |
|
内部间距 |
上下左右 |
p-[32|20|10] |
padding-left: var(--number-[32|20|10]); padding-right: var(--number-[32|20|10]); padding-top: var(--number-[32|20|10]); padding-bottom: var(--number-[32|20|10]); |
X轴左右 |
px-[32|20|10] |
padding-left: var(--number-[32|20|10]); padding-right: var(--number-[32|20|10]); |
|
Y轴上下 |
py-[32|20|10] |
padding-top: var(--number-[32|20|10]); padding-bottom: var(--number-[32|20|10]); |
2.4 排版
样式分类 |
样式说明 |
语法 |
实现 |
字体 |
字体大小 |
text-[72|48|36|28|24|20] |
font-size: var(--number-[72|48|36|28|24|20]); |
字体颜色 |
text-[colorName]-[order] |
color: var(--color-[colorName]-[order]); |
|
字体对齐方式 |
text-[left|center|right] |
text-align: [left|center|right]; |
|
粗体 |
text-bold |
font-weight: bold; |
|
换行 |
text-break |
word-wrap: break-word; word-break: break-all; |
|
删除线 |
text-line |
text-decoration: line-through; |
|
1.5倍行距 |
text-height-p150 |
line-height: 150%; |
|
0.5间隔字符 |
text-space-5 |
letter-spacing: 0.5vmin; |
|
背景 |
背景颜色 |
bg-[colorName]-[order] |
background-color: var(--color-[colorName]-[order]); |
2.5 修饰
样式分类 |
样式说明 |
语法 |
实现 |
边框 |
全边框 |
border |
border-width: var(--number-1); border-style: solid; border-color: var(--color-gray-4); |
左边框 |
border-left |
border-left-width: var(--number-1); border-style: solid; border-color: var(--color-gray-4); |
|
右边框 |
border-right |
border-right-width: var(--number-1); border-style: solid; border-color: var(--color-gray-4); |
|
上边框 |
border-top |
border-top-width: var(--number-1); border-style: solid; border-color: var(--color-gray-4); |
|
下边框 |
border-bottom |
border-bottom-width: var(--number-1); border-style: solid; border-color: var(--color-gray-4); |
|
边框颜色 |
bd-[colorName]-[order] |
border-color: var(--color-[colorName]-[order]); |
|
边框样式 |
border-transparent |
border-color: transparent; |
|
边框宽度 |
border-[2|4|6] |
border-width: var(--number-[1|2|4]); |
|
边框样式 |
border-dash |
border-style: dash; |
|
圆角 |
圆形 |
round |
border-radius: 50%; display: flex; overflow: hidden; |
全圆角 |
round-[4|10|20|36] |
-webkit-border-radius: var(--number-[4|10|20|36]); border-radius: var(--number-[4|10|20|36]); |
|
上左圆角 |
round-tl-10 |
-webkit-top-left-radius: var(--number-10); border-top-left-radius: var(--number-10); |
|
上右圆角 |
round-tr-10 |
-webkit-top-right-radius: var(--number-10); border-top-right-radius: var(--number-10); |
|
下左圆角 |
round-bl-10 |
-webkit-bottom-left-radius: var(--number-10); border-bottom-left-radius: var(--number-10); |
|
下右圆角 |
round-br-10 |
-webkit-bottom-right-radius: var(--number-10); border-bottom-right-radius: var(--number-10); |
|
阴影 |
阴影 |
shadow |
box-shadow: 0 0.533vmin 1.6vmin #d8d8d8; |
半透明度 |
半透明度 |
opacity-5 |
opacity: 0.5; |
旋转 |
旋转90度 |
rotate-90 |
transform: rotate(90deg); -webkit-transform: rotate(90deg); |
旋转180度 |
rotate-180 |
transform: rotate(180deg); -webkit-transform: rotate(180deg); |