写css第一步应该做什么？

前言

刚刚入门的时候，对于整个体系还不是那么熟知，印象很深的是，当时在一个页面中用到button标签，但是浏览器给这个button设置的默认样式不符合我要求，于是将其CSS格式化，然后没多久，在另外一个页面同样用到这个button，又再次复制之前的初始化代码来覆盖默认样式，真是难受，后来找到方案，就是在开发之前，使用一套初始化样式进行全局覆盖。

Reset.css

用过几套初始化样式套件，但是还是觉得网易的这套比较符合自己的开发习惯，这里就直接贴代码啦～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

如果在前期不制定好CSS reset，后期维护阶段在对其进行修改，就会牵涉到很多样式，这个时候来修复就非常头疼了，但是也不是说reset就是有利无害的，他具有以下几个劣势：

  1. 不合理的样式重置，比如说将所有的padding和margin都设置为0，这样一刀切就导致一些希望有初始padding、margin的元素没有默认值

  2. 性能劣势，设置完reset后通常会增加浏览器的样式计算成本，因为他作用对象是全局的，假如某条reset规则中的所有属性设置实际上并没有在任何元素上生效（因为全部被更特殊的规则给覆盖了），所有针对此规则的级联计算全都是浪费。

  3. 多余样式重复，比如说用的非常少的fieldset 、blockquote、q、keygen,legend等等，就造成了代码多余的弊端，如果用到了在设置也不迟。

对于这些问题，可以更具自己的项目需求，修改部分reset，以下是我参考github上大佬的修改版reset，自己也做了些调整：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body{margin: 0; font: 12px/22px Arial,"微软雅黑"; color: #333;}
header,footer,section,article,aside,nav,figure{display:block}

ul,ol{margin: 0;padding: 0;list-style: none;}
p,dl,dd{margin: 0;}
h1,h2,h3,h4{margin: 0;font-size: 100%;}

img{border:none;}
a{color: #21a557;cursor: pointer; text-decoration: none; }
a:active,a:hover{outline：none;}
a:hover{text-decoration: underline;}

strong{font-weight:normal;}
em,i{font-style:normal;}

table{border-collapse: collapse; table-layout: fixed;border-spacing:0;}
th,td{padding: 0;}
button,input{box-sizing: border-box;padding: 0;border: none;background: none;}

Normalize.css

Normalize.css 与 reset.css恰好相反，注重通用的方案，一般可作为一个团队的基础样式，重置掉该重置的样式（例如body的默认margin），保留该保留的 user agent 样式，同时进行一些bug的修复，这点是reset所缺乏的。Normalize不讲求样式一致，而讲求通用性和可维护性。

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
html {
  /*统一行高*/
  line-height: 1.15;
  /*防止在winPhone和ISO中，因旋转屏幕而造成的字体大小的改变*/
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
}

body {
  /*去除margin*/
  margin: 0;
}

article,aside,footer,header,nav,section,figcaption,figure,main{
  /*重置IE8-浏览器的display*/
  display: block;
}

h1 {
  /*统一字体大小及margin*/
  font-size: 2em;
  margin: 0.67em 0;
}

figure {
  /*重置IE8浏览器的margin*/
  margin: 1em 40px;
}

hr {
  /*重置firefox浏览器的box-sizing*/
  box-sizing: content-box; 
  height: 0; 
  /*重置IE浏览器的overflow*/
  overflow: visible; 
}

pre {
  /*统一字体大小及字体系统*/
  font-family: monospace, monospace; 
  font-size: 1em; 
}

a {
  /*移除IE10中的灰色背景*/
  background-color: transparent; 
  -webkit-text-decoration-skip: objects; 
}

abbr[title] {
  /*移除Chrome57- and Firefox 39-中的border-bottom*/ 
  border-bottom: none; 
  /*统一text*/-decoration
  text-decoration: underline; 
  text-decoration: underline dotted; 
}

b,strong {
  /*统一字体重量*/
  font-weight: bolder;
}

code,kbd,samp {
  /*统一字体系列及字体大小*/
  font-family: monospace, monospace; 
  font-size: 1em; 
}

dfn {
  /*重置Android4.3-浏览器的字体样式*/ 
  font-style: italic;
}

mark {
  /*重置IE8-浏览器的背景颜色及文本颜色*/ 
  background-color: #ff0;
  color: #000;
}

small {
  /*统一字体大小*/
  font-size: 80%;
}

sub,sup {
  /*去除sub、sup对行高的影响*/
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  /*统一位置*/
  bottom: -0.25em;
}

sup {
  /*统一位置*/
  top: -0.5em;
}

audio,video {
  /*重置IE8-浏览器的display    */
  display: inline-block;
}

audio:not([controls]) {
  /*重置iOS 4-7中的display及height*/
  display: none;
  height: 0;
}

img {
  /*重置IE9-浏览器的border-style*/
  border-style: none;
}

svg:not(:root) {
  /*重置IE浏览器中的overflow*/
  overflow: hidden;
}

button,input,optgroup,select,textarea {
  /*统一样式*/
  /*移除Firefox and Safari中的margin*/
  font-family: sans-serif; 
  font-size: 100%; 
  line-height: 1.15; 
  margin: 0; 
}

button,input { 
  /*重置IE浏览器中的overflow*/
  overflow: visible;
}

button,select { 
  /*重置firefox浏览器中的text-transform*/
  text-transform: none;
}

button,html [type="button"], [type="reset"],[type="submit"] {
  /*重置webkit浏览器的appearance属性*/
  -webkit-appearance: button; 
}

button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
  /*重置firefox浏览器中的border和padding*/
  border-style: none;
  padding: 0;
}

button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
  /*统一outline*/ 
  outline: 1px dotted ButtonText;
}

fieldset {
  /*重置firefox浏览器的padding*/
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; 
  color: inherit; 
  display: table; 
  max-width: 100%; 
  padding: 0; 
  white-space: normal; 
}

progress {
  /*重置IE9-浏览器的display*/
  display: inline-block; 
  /*重置Chrome*/, Firefox浏览器的vertical-align
  vertical-align: baseline; 
}
textarea {
  /*移除IE浏览器中默认的垂直滚动条*/
  overflow: auto;
}

[type="checkbox"],[type="radio"] {
  /*重置IE9-浏览器的box-sizing及padding    */
  box-sizing: border-box; 
  padding: 0; 
}

[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
  /*修正Chrome中增加和减量按钮的光标样式*/
  height: auto;
}

[type="search"] {
  /*重置Chrome and Safari的appearance和outline-offset*/
  -webkit-appearance: textfield; 
  outline-offset: -2px; 
}

[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {
  /*在macOS上删除Chrome和Safari中的内填充和取消按钮。*/
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  /*在iOS和Safari中，纠正无法点击的类型。*/
  -webkit-appearance: button; 
  font: inherit; 
}

details, menu {
  /*重置IE8-浏览器的display*/
  display: block;
}

summary {
  /*统一display*/
  display: list-item;
}

canvas {
  /*重置IE8-浏览器的display*/
  display: inline-block;
}

template {
  /*重置IE浏览器的display*/    
  display: none;
}

[hidden] {
  /*重置IE9-浏览器的display    */
  display: none;
}

那么这两者那个更适合呢？当然是符合你需求的就是最适合的。虽然说Normalize.css 中重置修复的很多bug，其实在我们的项目中十个项目不见得有一个会用得上，那么这些重置或者复，某种意义上而言也是所谓的冗余代码。

一般我们是根据自己项目的需求，将reset和normalize混合后，去其糟粕，编写出符合自己项目真正的初始化样式套件，这是我根据github上小伙伴参考，并且修改的私人定制初始化样式套件：

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
html{
    /*这样，1rem=100px，方便后续计算，不设置为10px是因为chrome下最小字体大小为12px*/
    font-size:100px;
}
body{
    /*设置为12px*/
    font-size: 0.12rem;
    line-height: 1.5;
    /*不使用纯黑色#000，降低页面对比度*/
    color:#222;
}
a{
    color:#666;
    text-decoration:none;
}
a:hover,a:active{
    color:#0ae;
    text-decoration: underline;
}
::selection{
    background-color: #b3d4fc;
    text-shadow:none;
}
ul{
    margin: 0;
    padding: 0;
    list-style:none;
}
.fl{float: left;}
.fr{float: right;}
.clear:after{content:""; display: block; clear: both;}
.clear{zoom:1;}
/*低版本浏览器提示*/
.browserupgrade{
    margin:0;
    padding:1rem;
    background-color: #ccc;
}

总结

其实这片文章并没有讲多少实质上的东西，一些理论也是参照前辈经验而提出来的，这里做一个笔记，方便自己将来引用。