CSS 揭秘 - 第一章，引言

发表于 | 分类于

一，浏览器前缀的自动化

1）Autoprefixer

2）prefixfree

3）Stylus, LESS, SASS 的 Mixin

二，CSS 编码技巧

写可维护性高的组件（可维护性高意味着尽量减少改动时要编辑的地方）

在写CSS组件时，可维护性和可扩展性都是必须要考虑的事情，然后就产生了属性之间的依赖性。

比如：

1）组件内 font-size 和 line-height 的依赖性，

2） em单位和rem单位，分别对父节点和根结点中 font-size 的依赖性。

在考虑扩展性时，我们需要审视哪些效果应该跟着一起改变，而哪些效果保持不变。

举例：几个css框架中，对于按钮组件不同的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/* bootstrap v4 */
.btn {
  display: inline-block;
  font-weight: normal;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
/* semantic ui */
.ui.button {
  cursor: pointer;
  display: inline-block;
  min-height: 1em;
  outline: none;
  border: none;
  vertical-align: baseline;
  background: #E0E1E2 none;
  color: rgba(0, 0, 0, 0.6);
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  margin: 0em 0.25em 0em 0em;
  padding: 0.78571429em 1.5em 0.78571429em;
  text-transform: none;
  text-shadow: none;
  font-weight: bold;
  line-height: 1em;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  border-radius: 0.28571429rem;
  box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  will-change: '';
  -webkit-tap-highlight-color: transparent;
}
/* bluma */
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 1rem;
  height: 2.285em;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  line-height: 1.5;
  padding-left: 0.75em;
  padding-right: 0.75em;
  position: relative;
  vertical-align: top;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: white;
  border: 1px solid #dbdbdb;
  color: #363636;
  cursor: pointer;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 0.75em;
  padding-right: 0.75em;
  text-align: center;
  white-space: nowrap;
}

小技巧：

1）把半透明的黑色或者白色叠加在主色调上，即可产生主色调的亮色和暗色变体。这个技巧可以解决扩展后在不同颜色中，实现该颜色的亮色和暗色变体的需求。

1
2
3
4
5
6
7
8
9
10
/* button */
.button {
  background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
}
.button.cancel {
  background-color: #c00;
}
.button.ok {
  background-color: #6b0;
}

currentColor和inherit

currentColor是CSS有史以来的第一个变量。未来，在原生CSS中拥有处理颜色的函数后，currentColor就会变得更加有用。可以用这些函数来产生其各种深浅明暗的变体。

inherit可以用在任何CSS属性中，默认是绑定到父元素的计算值，伪元素中则会取生成该伪元素的宿主元素。

三，响应式网页设计

思考：

怎样才能做好响应式？

通常，我们会通过媒体查询（Media Query）规则来修补网站在各个分辨率下出现的问题。
然而，对于今后CSS的改动来说，每个媒体查询都会增加成本。

媒体查询不能以一种连续的方式来修复问题，它们的工作原理基于某几个特定的阶梯（亦称为“断点”），
并且，媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定。

遵从尽量减少代码重复的原则。

思路：

1）网站的大部分样式代码以弹性的方式去编写，然后当把媒体查询作为最后的手段（实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸）。

2）在较大或者较小的视口下完全改变网站的设计形态。

建议：

1）使用百分比长度来取代固定长度，或者尝试使用与视口相关的单位（vw、vh、vmin、vmax），他们的值解析为视口宽度或高度的百分比。

2）当需要在较大分辨率下得到固定宽度时，使用 max-width 而不是 width，因为它可以适应较小的分辨率，而无需使用媒体查询。

3）为替换元素（比如img、object、video、iframe等）设置 max-width: 100%。

4）使用 background-size: cover 可以使背景图片完整铺满一个容器，但在移动网页中不建议把大图缩小显示。

5）当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定列的数量。
Flexbox 布局或者 display:inline-block 加上常规的文本折行行为，都可以实现这一点。

四，合理使用简写

1
2
3
/* 以下两行 CSS 代码并不是等价的： */
background: rebeccapurple;
background-color: rebeccapurple;

因为同时可能会有一条 background-image 声明在起作用，展开式写法并不会帮助你清空所有相关的其他属性，从而可能会干扰你想要达到的效果。

合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。

如果我们要明确地去覆盖某个具体的展开式属性并保留其他相关样式，那就需要用展开式属性。

CSS的“列表扩展规则”中提到，如果只为某个属性提供一个值，那它就会扩散并应用到列表中的每一项。
因此，我们可以把这些重复的值从简写属性中抽出来写成一个展开式属性。

1
2
3
background: url(tr.png) top right, url(br.png) bottom right, url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

五，预处理器

很多受预处理器启发的特性都已经以各种方式融入到原生 CSS 中了。

比如：CSS自定义属性暨层叠式变量，calc() 函数，color() 函数 等。这些原生特性通常比预处理器提供的版本要更强大，因为他们是动态的。

1
2
3
4
5
6
7
8
9
ul {
  --accent-color: purple;
}
ol {
  --accent-color: rebeccapurple;
}
li {
  background: var(--accent-color);
}

这个例子的重点在于向你展示CSS的原生变量所具备的动态性。