原子样式实践第3篇 原子样式文件构成
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原子样式实践第3篇 原子样式文件构成相关的知识，希望对你有一定的参考价值。
原子样式的分类多，数量多，适配多种浏览器，统一值转换，手工维护工作量较大，需要细化后进行管理。
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; | |
换行 | 原子样式实践第10篇 原子样式到原子设计的发展使用 |