一、什么是公共 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，可以写简单点但是一定要有。

stones4zd

发布了86 篇原创文章 · 获赞 146 · 访问量 5万+

私信关注

CSS3干货11：页面中的公共CSS代码