构建你自己的 CSS 微框架

最初，我们曾考虑提供一套完整的 SCSS 指导说明，详细讲解如何构建微框架的每个部分，包括编译步骤。但为了更友好地面向初学者，我们决定简化内容。

在开始构建我们的 CSS 微框架之前，先来讨论一下我们希望实现的结构。

我们的 CSS 微框架结构

我们的微框架需要包含以下不同部分：

• CSS 重置
• 简单的布局类
• 宽度、高度、外边距和内边距
• 排版
• 效果（如颜色、阴影或透明度）
• 列网格系统

为什么我们需要一个独立的 CSS 结构？

1/*1. 显示*/
2.display-block { display: block }
3.display-inline { display: inline }
4.display-inline-block { display: inline-block }
5.display-flex { display: flex }
6.flex-direction-column { flex-direction: column }
7
8/*2. 浮动与清除*/
9.float-left { float: left }
10.float-right { float: right }
11.clear-both { clear: both }
12
13/*3. 定位*/
14.position-static { position: static }
15.position-relative { position: relative }
16.position-absolute { position: absolute }
17.position-fixed { position: fixed }
18
19/*4. 上、右、下、左*/
20.top0 { top: 0 }
21.top1 { top: 10px }
22.bottom0 { bottom: 0 }
23.bottom2 { bottom: 20px }
24/*
25按需扩展...
26.leftX, .rightX 等等...
27*/
28
29/* 跳过其余部分 */
30/* 5. Z-index */
31/*6.*/
32/*7.*/

宽度、高度、外边距和内边距

为了保持宽度、高度、外边距和内边距的简洁性，我们仅添加最基础且实用的部分：

1/* 宽度 */
2.w25p { width: 25% }
3.w33p { width: 33.33% }
4.w50p { width: 50% }
5.w75p { width: 75% }
6.w100p { width: 100% }
7
8/* 高度 */
9.h25vh { height: 25vh }
10.h33vh { height: 33.33vh }
11.h50vh { height: 50vh }
12.h75vh { height: 75vh }
13.h100vh { height: 100vh }
14
15.m10 { margin: 10px }
16.m20 { margin: 20px }
17.pt10 { padding-top: 10px }
18.pr10 { padding-right: 10px }
19.pb10 { padding-bottom: 10px }
20.pl10 { padding-left: 10px }
21
22.p0 { padding: 0 }
23.m0 { margin: 0 }

我们为何选择上述最小限度的 CSS 代码，而不是其他形式？以下是背后的逻辑：

• 基于百分比的宽度可快速根据父元素宽度设置子元素宽度。例如，若父元素宽 100 像素，使用 w50p 类的子元素将自动变为 50 像素宽。
• 在许多设计场景中，你可能希望某个元素占据整个视口高度，即使用 100vh。vh 是“视口高度”的单位。
• 如果你的网页设计中存在大量具有相似外边距和内边距的元素，使用像 m10 或 p0 这样的类会非常方便。此外，pt10、pr10、pb10 和 pl10 提供了对上下左右方向的单独控制。

现在是时候讨论命名规范了。

如果类名后没有单位，则表示像素值；若类名后带有字母 "p"，则表示百分比值（例如 w25p 与 m10 的对比）。

排版

排版可以很复杂，这里只介绍最基本的内容：

1/* 快速字体族 */
2.arial { font-family: Arial, sans-serif }
3.georgia { font-family: Georgia, sans-serif }
4
5/* 字号 */
6.fs20 { font-size: 20px }
7.fs30 { font-size: 30px }
8
9/* 字体粗细与装饰 */
10.font-weight-bold { font-weight: bold }
11
12/* 行高预设 */
13.line-height1 { line-height: 1 }
14.line-height2 { line-height: 2 }

效果

对于颜色、阴影或透明度等效果，我们仅添加基础样式，后续可根据需要自行扩展。

1.bg-tomato { background: #EF466F }
2.bg-olive { background: #FFD166 }
3.bg-plum { background: #0AD6A1 }
4.bg-wheat { background: bisque }
5
6.color-tomato { color: #EF466F }
7.color-olive { color: #FFD166 }
8.color-plum { color: #0AD6A1 }
9.color-wheat { color: bisque }
10
11.shadow0 { box-shadow: none }
12.shadow1 { box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.4) }
13.shadow2 { box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.4) }
14
15.opacity0 { opacity: 0 }
16.opacity1 { opacity: 1 }
17.opacity05 { opacity: 0.5 }

列网格系统

关于列网格，我们将沿用之前基于浮动的网格方案。

唯一的区别是：移除了原始网格中的颜色样式。我们已注释掉相关代码，以便于对比查看。

1.container {
2    max-width: 1200px;
3    width: 100%;
4    margin: 0 auto;
5}
6.wrapper {
7    /* background: silver; */
8    width: calc(100% - 20px);
9    margin: 10px;
10    min-height: 50px;
11    overflow: auto;
12    clear: both;
13}
14
15/* 1/12 = 0.0833 */
16@media (max-width: 799px) {
17    .smcol1 { width: calc(8.33% - 2%) }
18    .smcol2 { width: calc(16.66% - 2%) }
19    .smcol3 { width: calc(24.99% - 2%) }
20    .smcol4 { width: calc(33.32% - 2%) }
21    .smcol5 { width: calc(41.65% - 2%) }
22    .smcol6 { width: calc(49.98% - 2%) }
23    .smcol7 { width: calc(58.31% - 2%) }
24    .smcol8 { width: calc(66.64% - 2%) }
25    .smcol9 { width: calc(74.97% - 2%) }
26    .smcol10 { width: calc(83.33% - 2%) }
27    .smcol11 { width: calc(91.63% - 2%) }
28    .smcol12 { width: calc(100% - 2%) }
29
30    .smcol1,
31    .smcol2,
32    .smcol3,
33    .smcol4,
34    .smcol5,
35    .smcol6,
36    .smcol7,
37    .smcol8,
38    .smcol9,
39    .smcol10,
40    .smcol11,
41    .smcol12 {
42        /* background: yellowgreen; */
43        min-height: 50px;
44        display: block;
45        margin: 10px 1%;
46        /* outline: 1px solid black; */
47        float: left;
48    }
49}
50
51@media (min-width: 800px) {
52    .lgcol1 { width: calc(8.33% - 2%) }
53    .lgcol2 { width: calc(16.66% - 2%) }
54    .lgcol3 { width: calc(24.99% - 2%) }
55    .lgcol4 { width: calc(33.32% - 2%) }
56    .lgcol5 { width: calc(41.65% - 2%) }
57    .lgcol6 { width: calc(49.98% - 2%) }
58    .lgcol7 { width: calc(58.31% - 2%) }
59    .lgcol8 { width: calc(66.64% - 2%) }
60    .lgcol9 { width: calc(74.97% - 2%) }
61    .lgcol10 { width: calc(83.33% - 2%) }
62    .lgcol11 { width: calc(91.63% - 2%) }
63    .lgcol12 { width: calc(100% - 2%) }
64
65    .lgcol1,
66    .lgcol2,
67    .lgcol3,
68    .lgcol4,
69    .lgcol5,
70    .lgcol6,
71    .lgcol7,
72    .lgcol8,
73    .lgcol9,
74    .lgcol10,
75    .lgcol11,
76    .lgcol12 {
77        /* background: lightsalmon; */
78        min-height: 50px;
79        display: block;
80        margin: 10px 1%;
81        /* outline: 1px solid black; */
82        float: left;
83    }
84}

好了，我们的自定义、完整的 CSS 微框架已经完成！