一、什麼是公共 CSS
我的理解是：任何一個頁面都用會到的 CSS 代碼。
“任何一個頁面”的說法可能有點誇張，因爲很多開發者都有自己的一些偏好設置。不管怎麼說，一個成熟的前端開發老鳥做頁面，都會用到這些 CSS 代碼。
最典型的代碼，就是通配符樣式設置：
*{
margin:0;
padding:0;
}
二、公共CSS的作用
-
減少瀏覽器的原始樣式差異。這應該是公共 CSS 最大的作用了。
因爲版本和廠商的不同，瀏覽器之間的原始樣式差異較大。這直接影響了一個頁面質量的好壞，會讓客戶妹妹對我們的技術產生懷疑。
-
減少開發者 CSS 基礎代碼量。可以讓前端開發者偷很多懶，提高開發效率。
三、公共CSS的使用
把公共 CSS 代碼和項目的 CSS 代碼一定要分開。
公共 CSS 代碼一定要放在項目 CSS 代碼的前面。所以，我覺得一個頁面至少應該是兩個 CSS 文件：
-
公共 CSS 文件
-
項目 CSS 文件
就像這樣：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/public.css"> <!-- 公共 CSS -->
<link rel="stylesheet" href="css/app.css"> <!-- 項目 CSS -->
</head>
這裏，我習慣命名爲 public.css，也有人喜歡把公共 CSS 命名爲 reset.css，common.css 。只是名字不同，作用完全一樣。
在此基礎上，也可以規劃出項目自身需要的公共 CSS。比如，相同的頭部，相同的底部等板塊的樣式。
當然，一個項目可能還有其他 CSS 文件。但是不管怎麼樣，公共 CSS 文件一定要在最前面。原因很簡單，方便樣式覆蓋。
四、常用的公共CSS文件
這裏只談通用的公共 CSS。常用的通用 CSS 文件有：
-
Normalize.css： http://necolas.github.io/normalize.css/
-
Eric Meyer ： https://meyerweb.com/eric/tools/css/reset/
-
國內大神做的 zacklive.com ： https://github.com/ZacharyChim/dawn.css
除了這些外，各大廠商在自己的網站上，也有自己的公用 CSS 設定。具體，可以打開各大廠商的官網去找公共樣式。
比如，騰訊遊戲的公共樣式。以下文件鏈接來自騰訊遊戲官網：https://game.qq.com/
https://game.gtimg.cn/images/game/web201910/css/common.css
五、我自己的公共 CSS 代碼
以上的公共樣式，我都不喜歡用。原因，我喜歡貼上自己的個性化的東西。
我的建議：根據流行的公共 CSS，自己做適當的修改。當然，懶得改，直接拿來用，也是沒問題的。
我做項目分爲簡化版公共樣式和齊全版公共樣式。
1. 簡化版
要求不是特別高的項目，就能應付了。
*{ margin:0; padding:0;}
table{ border-collapse:collapse;border-spacing:0;}
ol,ul,li{ list-style:none;}
a,textarea,input,button{ outline:none;}
ins,a{ text-decoration:none;}
img{ border:none;}
li,input,img,textarea,select{ vertical-align:middle;}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{ zoom: 1; }
.clears{ clear:both; line-height:0px; overflow:hidden; font-size:0px; height:0px;}
body{
font-family:Verdana,Arial,"Microsoft Yahei","Pingfang SC",SimSun;
font-size:12px;
}
上課做案例的極簡單版本，主要上課用的，代碼少，節省時間，但是一般的項目也可以用：
*{ margin:0; padding:0;}
table{ border-collapse:collapse}
ol,ul,li{ list-style:none;}
a,textarea,input,button{ outline:none;}
a{ text-decoration:none;}
img{ border:none;}
li,input,img,textarea,select{ vertical-align:middle;}
.clears{ clear:both; line-height:0px; overflow:hidden; font-size:0px; height:0px;}
body{
font-family:Verdana,Arial,"Microsoft Yahei","Pingfang SC",SimSun;
font-size:12px;
}
2. 齊全版
這個版本，現在看來寫的可能囉嗦了點，很多樣式其實在樣式中都沒怎麼用上。
還是貼出來，共勉。因爲代碼太多，就貼 SCSS 版本的。
啥？不會用 SCSS？傳送門點這裏：https://www.sass.hk/
@charset "utf-8";
// 定義基礎顏色變量。這個可以擴展
$red:#f00 !default;
$orange:#f60 !default;
$blue:#00d !default;
$colorBorder:#ccc !default;
// 公共樣式 CSS
*{ margin:0; padding:0;}
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
table{ border-collapse:collapse;border-spacing:0;}
th{ font-weight:normal;}
fieldset,a img{ border:0;}
iframe{ display:block;}
ol,ul,li{ list-style:none;}
del{ text-decoration:line-through; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:bolder;}
q:before,q:after {content:'';}
sub,sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
a,a:focus,textarea,input,button,input:focus,input:hover{ outline:none;}
ins,a{ text-decoration:none;}
textarea{ resize:none; overflow-y:auto;}
em,i{ font-style:normal;}
li,input,img,textarea,select{ vertical-align:middle;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
audio,canvas,video{ display: inline-block;*display: inline;*zoom: 1;}
abbr,acronym{ border:0;font-variant:normal;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:500;}
::-webkit-input-placeholder {
font-size: 14px; }
::-moz-placeholder {font-size: 14px;}
:-ms-input-placeholder {font-size: 14px; }
input:-moz-placeholder { font-size: 14px; }
.clearfix:after,.row:after {
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
overflow: hidden;
}
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }
.cl {clear: left;}
.cr {clear: right; }
.cb {clear: both;}
.clears{ clear:both; line-height:0; overflow:hidden; font-size:0; height:0;}
.fl{ float:left; _display:inline;}
.fr{ float:right; _display:inline;}
.hide {display:none;}
.show{ display:block;}
.ovh{ overflow: hidden;}
.d_b{ display:block;}
.d_ib{ display:inline-block;}
.v_m{ vertical-align:middle;}
.abs {position: absolute;}
.rel {position: relative;}
.fix {position: fixed;}
.m_auto{ margin-left: auto;margin-right: auto;}
.fwb{ font-weight:bolder;}
.fwn{ font-weight:normal;}
.nowrap {white-space: nowrap;overflow: hidden}
.t_center{ text-align:center;}
.t_right{ text-align:right;}
.t_left{ text-align:left;}
.t_underline{ text-decoration:underline;}
// 常用顏色設置
.c_fff{ color:#fff;}
.c_fff a{ color:#fff;}
.c_fff a:hover{ text-decoration:underline;}
.c_000{ color:#000;}
.c_333{ color:#333;}
.c_666{ color:#666;}
.c_999{ color:#999;}
.c_ccc{ color:#ccc;}
.c_orange{ color:$orange;}
.c_red{ color:$red;}
.c_blue{ color:$blue;}
.btn{ cursor:pointer; border:0; overflow:visible;}
.inputs{ border:1px $colorBorder solid; padding-left:10px; padding-right:10px; }
.textarea{ border:1px $colorBorder solid; padding: 10px;}
//width setting
@for $i from 4 through 100 {
.w#{$i}0 {
width: (10 * $i)+px;
}
}
// font-size setting
@for $fz from 5 through 25{
.f#{$fz*2}{
font-size:(2*$fz)+px;
}
}
// padding,margin setting
@for $pd from 1 through 8{
.pd#{$pd*5}{
padding:$pd*5+px;
}
.pl#{$pd*5}{
padding-left:$pd*5+px;
}
.pr#{$pd*5}{
padding-right:$pd*5+px;
}
.pt#{$pd*5}{
padding-top:$pd*5+px;
}
.pb#{$pd*5}{
padding-bottom:$pd*5+px;
}
.ml#{$pd*5}{
margin-left:$pd*5+px;
}
.mr#{$pd*5}{
margin-right:$pd*5+px;
}
.mb#{$pd*5}{
margin-bottom:$pd*5+px;
}
.mt#{$pd*5}{
margin-top:$pd*5+px;
}
}
html{ background:#fff; color:#333;}
body{ font-family:Verdana,Arial,"Microsoft Yahei","Pingfang SC","SimSun"; text-align:center; font-size:14px;}
input,textarea,select{
font-family:Verdana,Arial,"Microsoft Yahei","Pingfang SC","SimSun";
}
// 自己喜歡用的頁面框架類
.section{
width:1200px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
.section_big{ min-width: 1200px; margin-left:auto; margin-right:auto;}
我的這個其實也是在別人的基礎上去修改拓展的，用了好些年了，妥妥的。
大家如果去面試前端，面試官讓我們當場操作下寫一個小頁面。大家記得，一定要先寫公共 CSS，可以寫簡單點但是一定要有。