【原子样式实践】第2篇 原子样式分类和定义

1 布局

1.1 布局分类

页面元素的显示方式主要分为外部显示和内部显示,参考属性 ​​display​​。

外部显示主要是元素的外在表现,包括行内显示、区块显示。

内部显示主要是子元素的显示方式,对应我们常说的布局,包括流式(Flow)布局、浮动(Float)布局、弹性(Flex)布局、网格(Grid)布局等。

1.2 流式布局

浏览器默认采用的布局,页面元素自上而下排列,取决于原生样式。对于简单页面或者DEMO页面可以使用。

<!-- 使用示例 -->
<div class="container">
<div class="card">
<div class="item">
...
</div>
</div>
<div class="card">
<div class="item">
...
</div>
</div>
</div>

这种情况下无需额外定义样式。

1.3 浮动布局

用于页面元素的全局灵活布局或者次要元素的显示布局。

主要使用属性 ​​position​​,配合 ​​top​​、​​bottom​​、​​left​​、​​right​​ 使用。 

(1)全局灵活布局包括游戏、活动等全屏场景。

.stage {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.circle {
position: absolute;
width: 32px;
height: 32px;
top: 80px;
left: 100px;
}

(2)次要元素布局包括菜单、红点等组件内应用场景。

# 红点场景示例
.data-label {
position: relative;
width: 64px;
height: 64px;
}
.red-dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 4px;
top: -3px;
right: -3px;
}

这种情况下,可以定义简单样式。

.pos-abs {
position: absolute;
}
.pos-rel {
position: relative;
}
.wh-full {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.p-tr-3 {
top: 3px;
right: 3px;
}

浮动的情况下,会涉及到层次的问题,涉及到属性 ​​z-index​​,可以定义样式如下。

.z-1 { z-index: 1 }
.z-2 { z-index: 2 }
.z-3 { z-index: 3 }
.z-4 { z-index: 4 }
.z-5 { z-index: 5 }

1.4 弹性布局

1.4.1 flex布局特点

flex布局是使用方便的布局,目前主要的布局方式。

(1)支持横向、纵向、换行等多种排列方向,使用属性 ​​flex-direction​​ , ​​flex-wrap​​。

(2)支持上、下、左、右、中等对齐方式,使用属性 ​​justify-content​​​, ​​align-items​​​, ​​align-content​​。

(3)支持内部元素的有序排列,使用属性 ​​order​​。

(4)支持弹性变大、缩小,使用属性 ​​flex-grow​​​, ​​flex-shrink​​。

1.4.2 flex布局样式

根据排列方向、对齐方式等角度除法封装常用样式,示例如下。

.row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
}
.row-r { ... }

.col {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.col-r { ... }

.ai-top { ... }
.ai-center {
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;

}
.ai-bottom { ... }

.jc-left { ... }
.jc-center {
-webkit-justify-content: center;
justify-content: center;
}
.jc-right { ... }

.c1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.c2 { ... }

.c-g1 { ... }
.c-s1 { ... }
<!-- 使用示例 -->
<div class="row">
<div class="c1">...</div>
<div class="c1">...</div>
<div class="c1">...</div>
</div>

1.5 网格布局

1.5.1 网格布局特点

弹性布局好用,但是对于多行多列的布局写起来太过于麻烦,而网格布局则能很好的解决这一问题。

网格布局使用属性 ​​grid-template-columns​​,其参数可以设置为不同宽度,使用可以很灵活。但在预定义的情况下,就失去了这一灵活性。

在结合弹性布局的情况下,可以考虑固定网格,比如两列均分、九宫格,十六宫格等,可以满足基本的布局需要。

如果有其他复杂场景,也可以自定义样式追加使用。

1.5.2 网格布局样式

.gc-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}

.gc-2-21 {
display: grid;
grid-template-columns: 2fr 1fr;
}

.gc-2-12 {
display: grid;
grid-template-columns: 1fr 2fr;
}

.gc-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.gc-4 {
...
}

.gc-5 {
...
}

1.6 元素空间

1.6.1 尺寸

主要是宽度 ​​width​​​ 和高度 ​​height​​,根据常用尺寸定义即可,例如icon、缩略图、封面图、卡片、标题、列表等。

.w-36 {
width: 36px;
}
.w-80 {
width: 80px;
}
...

.h-120 {
height: 120px;
}
.h-80 {
height: 80px;
}
.h-20 {
height: 20px;
}
.h-1 {
height: 1px;
}
...

.wh-36 {
width: 36px;
height: 36px;
}
.wh-96 {
width: 96px;
height: 96px;
}

为了配合弹性布局使用,需要定义最小宽度 ​​min-width​​​ 或者最小高度 ​​min-height​​,序号、空白等都需要。

.mw-100 {
min-width: 100px;
}

.mh-200 {
min-height: 200px
}
1.6.2 元素间距

间距分为对内 ​​padding ​​​和对外 ​​margin​​ 两种,分全部、水平(x)、垂直(y)方向或者上(t)下(b)左(l)右(r),根据常用规范定义使用即可。

.m-20 { margin: 20px }


.px-20 {
padding-left: 20px;
padding-right: 20px;
}
.px-10 {...}

.mx-32 { ... }
.mx-20 { ... }

.my-20 { ... }
.my-10 { ... }

.pt-10 { padding-top: 10px }
.pb-10 { padding-bottom: 10px }
.pl-10 { padding-left: 10px }
.pr-10 { padding-right: 10px }
1.6.3 子元素间距

对于使用弹性布局和网格布局的,元素间的间距可以在父元素定义。

.gg-30 { grid-gap: 30px; }
.gg-20 { grid-gap: 2.667vmin; }
.gg-10 { grid-gap: 1.333vmin; }
.gg-5 { grid-gap: 0.667vmin; }

2 色彩

2.1 上色的元素

元素的背景色 ​​background-color​​​ 、前景色(字体颜色) ​​color​​​ 和边框色 ​​border-color​​ 均可定义。

对于页面的背景色的全局设置,根据情况可以使用 style 定义,其他均使用预定义样式。

2.2 色彩主题

除了黑白色基本主题外,还需要支持信号色(红、黄、绿,对应错误/失败、警告/提示、成功)和多个主题。

每套主题需要设置一个主题色。

# 背景颜色
.bg-primary { ... }
.bg-white { ... }
.bg-red { ... }
.bg-yellow { ... }
.bg-blue { ... }
.bg-green { ... }

# 字体颜色
.fc-primary { ... }
.fc-white { ... }
.fc-black { ... }
.fc-red { ... }
.fc-yellow { ... }
.fc-blue { ... }
.fc-green { ... }

.fc-gray1 { ... }
.fc-gray2 { ... }
.fc-gray3 { ... }

.bg-gray1 { ... }
.bg-gray3 { ... }

# 线颜色
.line-color-primary { ... }
.line-color-red { ... }
.line-color-yellow { ... }
.line-color-green { ... }

...

2.3 色阶

对于同一色系,色阶要具有区分度,不一定需要连续。

颜色定义需要设计师完成。

3 排版

3.1 排版说明

取消H1、H2、FORM等组合样式使用,除非是大量内容的固定格式,可以降级为原子样式。

3.2 字体名称

避免使用浏览器不支持的字体,数字字体或者符号字体尽量小。

# 数字字体
.ff-n { ... }

3.3 字体大小

使用常见字号。

.fs-36 { font-size: 36px }
.fs-28 { font-size: 28px }
.fs-20 { font-size: 20px }

3.4 字体颜色

参见色彩主题,以 ​​fc- ​​开头。

3.5 字体样式

.fw-b { font-weight: bold }
.f-lt { text-decoration: line-through; }

由于斜体的阅读体验不太好,可以不使用。

3.6 字体换行

多行文字,尤其是涉及到较长英文的内容,需要换行支持。

.f-wb {
word-wrap: break-word;
word-break: break-all;
}

3.7 文字对齐

可以考虑使用,也可以考虑使用布局替代。

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

4 修饰

4.1 修饰说明

用于强化元素表现,达到更好的表达效果。

修饰的方式很多,按需选用即可。

4.2 边框

使用边框样式,使用宽度 ​​border-width​​​、样式 ​​border-style ​​​和颜色 ​​border-color​​ 分别定义。

由于边框使用频繁,可以定义组合样式全边框 ​​line-all​​,降级为原子样式。

.line-all { 
border-width: 1px;
border-style: solid;
border-color: #cccccc;
}

.line-bottom { ... }

.line-width-2 { border-width: 2px; }

.line-color-red { border-color: #990000 }
...

4.3 圆角

使用​​border-radius​​定义,根据需要分别定义左上、左下、右上、右下圆角。

特别定义一个圆形。


.round {
border-radius: 50%;
display: flex;
overflow: hidden;
}

.br-36 {
-webkit-border-radius: 4.8vmin;
border-radius: 4.8vmin;
}

.br-l-36 {
-webkit-top-left-radius: 4.8vmin;
border-top-left-radius: 4.8vmin;
-webkit-bottom-left-radius: 4.8vmin;
border-bottom-left-radius: 4.8vmin;
display: flex;
overflow: hidden;
}

.br-r-36 {
-webkit-top-right-radius: 4.8vmin;
border-top-right-radius: 4.8vmin;
-webkit-bottom-right-radius: 4.8vmin;
border-bottom-right-radius: 4.8vmin;
display: flex;
overflow: hidden;
}

.br-bl-36 {
border-bottom-left-radius: 4.8vmin;
border-top-left-radius: 4.8vmin;
}

.br-br-36 {
border-top-right-radius: 4.8vmin;
border-bottom-right-radius: 4.8vmin;
}

4.4 阴影

根据需要使用阴影 ​​box-shadow​​。

.box-shadow5 {
box-shadow: 0px 5px 10px #d8d8d8;
}

4.5 透明度

按需定义即可,使用 ​​opacity​​ 属性。

.op5 {
opacity: 0.5;
}

4.6 旋转

元素根据需要可能要旋转,使用变形 ​​transform​​。

.r180 {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}

5 小结

原子样式的分类要合理,可扩展。

命名规则明确。常用的使用简称,必要时使用全称,避免混淆。

具体样式要少。按需定义,不使用的要删除。

更多阅读:

1 ​​display - CSS(层叠样式表) | MDN (mozilla.org)​

2 Flex 布局教程:语法篇 ​​https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html​

发表评论

相关文章