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

CSS3干货11：页面中的公共CSS代码相关推荐

Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
[css] 如何清除在项目中无用的css代码呢？
[css] 如何清除在项目中无用的css代码呢? 1.IDE中,会对没有使用到的样式,自己进行检测,删除时候,还需要手动删除. 2.webpack中,有基于消除无用css的插件(purifycss-w ...
php 像页面输出html,PHP在页面中原样输出HTML代码的方法介绍
本篇文章给大家介绍一下PHP在页面中原样输出HTML代码的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 字符串与HTML之间的相互转换主要应用htmlentities()函数 ...
php 输出带参数整个html页面,如何在PHP页面中原样输出HTML代码（是该找本php的数来看了）...
如何在PHP页面中原样输出HTML代码(是该找本php的数来看了) 一.总结一句话总结:字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. 1.php中的html标签如何 ...
html中怎么写css代码,html style样式标签元素教程
html标签元素之时时在构造html时,使用到style标签. 认识与用法教程一.基本语法 style英文翻译:格式.气概含意从字面上也不难晓得与CSS款式干系的标签. 完结.标签内放CSS代码 ...
thymeleaf页面中引入公共页面
一.前言当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...
在js在页面中添加百度统计代码
1. 新版统计代码获取 (不想手工添加代码?立刻一键安装) 此代码同时适用于PC端.移动端的页面,以异步加载形式进行加载,数据更准确.加载速度更快.请将此代码复制并粘贴到您要跟踪的每个网页中. < ...
web页面中如何隐藏js代码的显示。或者说如何不让别人一下子就能看懂我的web代码。
今天在看别人网页页面的时候,在百度搜索结果中的页面中右键查看源代码,发现百度搜索结果就只有两个代码,如下,没出现其他任何代码 <!DOCTYPE html> <!--STATUS O ...
解决 webpack4 中无法压缩 CSS 代码的问题
在webpack4中,我们可以使用 optimize-css-assets-webpack-plugin 插件来压缩 CSS 代码(具体内容可结合该插件的官网:https://www.npmjs.co ...

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