前端工程CSS初始化全局设置

580 字

3 分钟

前端工程CSS初始化全局设置

2023-10-20

css

/

front-end

分享前端工程初始化设置CSS的样式，俗称CSS Reset，在上古时期由于浏览器之间的差异导致前端工程要设置默认参数来保持样式的一致性，进而演化而来CSS Reset，而现如今的UI均比较成熟，内置了类似的设置，若是和你工程中UI样式冲突的话，请谨慎使用:

通用:#

1
html {
2
  box-sizing: border-box;
3
}
4
*, *:before, *:after {
5
  box-sizing: inherit;
6
}

在盒子模型中防止长宽超出。

相较于以往的将所有元素均设置为 box-sizing: border-box; 的做法，这种初始化定义更加友好，若是在一个节点设置了不同的box-sizing，则其子节点均会获得继承。

1
body, h1, h2, h3, h4, p,
2
figure, blockquote, dl, dd {
3
  margin: 0;
4
}
5
ul[class],
6
ol[class] {
7
  margin: 0;
8
  padding: 0;
9
  list-style: none;
10
}

去除一些HTML标签中奇怪的固定长度px，例如body的8px。

1
body {
2
  min-height: 100vh;
3
  line-height: 1.5;
4
}
5
h1, h2, h3, h4,
6
button, input, label {
7
  line-height: 1.1;
8
}

设置body高度及行高。

1
a:not([class]) {
2
  text-decoration-skip-ink: auto;
3
  color: currentColor;
4
}

可选: 设置a标签颜色样式同文本，而不是默认颜色。

1
input,
2
button,
3
textarea,
4
select {
5
  font: inherit;
6
}

1
p,
2
h1,
3
h2,
4
h3,
5
h4,
6
h5,
7
h6 {
8
  overflow-wrap: break-word;
9
}

设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出。

IOS#

1
html {
2
  -moz-text-size-adjust: none;
3
  -webkit-text-size-adjust: none;
4
  text-size-adjust: none;
5
}

使得iphone不会在横向模式下增加字体的大小。

最终:

1
html {
2
  box-sizing: border-box;
3
}
4
*, *:before, *:after {
5
  box-sizing: inherit;
6
}
7
body, h1, h2, h3, h4, p,
8
figure, blockquote, dl, dd {
9
  margin: 0;
10
}
11

12
ul[class],
13
ol[class] {
14
  margin: 0;
15
  padding: 0;
16
  list-style: none;
17
}
18
a:not([class]) {
19
  text-decoration-skip-ink: auto;
20
  color: currentColor;
21
}
22
input,
23
button,
24
textarea,
25
select {
26
  font: inherit;
27
}
28
p,
29
h1,
30
h2,
31
h3,
32
h4,
33
h5,
34
h6 {
35
  overflow-wrap: break-word;
36
}
37
// IOS
38
html {
39
  -moz-text-size-adjust: none;
40
  -webkit-text-size-adjust: none;
41
  text-size-adjust: none;
42
}

新版 CSS Reset (2024)#

摘自 A Modern CSS ResetA Modern CSS Reset

1
/* 1. Use a more-intuitive box-sizing model */
2
*, *::before, *::after {
3
  box-sizing: border-box;
4
}
5

6
/* 2. Remove default margin */
7
* {
8
  margin: 0;
9
}
10

11
body {
12
  /* 3. Add accessible line-height */
13
  line-height: 1.5;
14
  /* 4. Improve text rendering */
15
  -webkit-font-smoothing: antialiased;
16
}
17

18
/* 5. Improve media defaults */
19
img, picture, video, canvas, svg {
20
  display: block;
21
  max-width: 100%;
22
}
23

24
/* 6. Inherit fonts for form controls */
25
input, button, textarea, select {
26
  font: inherit;
27
}
28

29
/* 7. Avoid text overflows */
30
p, h1, h2, h3, h4, h5, h6 {
31
  overflow-wrap: break-word;
32
}
33

34
/* 8. Improve line wrapping */
35
p {
36
  text-wrap: pretty;
37
}
38
h1, h2, h3, h4, h5, h6 {
39
  text-wrap: balance;
40
}
41

42
/*
43
  9. Create a root stacking context
44
*/
45
#root, #__next {
46
  isolation: isolate;
47
}