原子樣式的分類多，數量多，适配多種浏覽器，統一值轉換，手工維護工作量較大，需要細化後進行管理。
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); |