【原子样式实践】第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;

换行

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);

发表评论

相关文章