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