前端项目中的基础Css文件

2018-02-27 10:58:41来源:https://www.liayal.com/article/5a910f97a00855248e5b7829作者:JI · 记小栈人点击

分享

Css 作为前端项目的三大骨架之一,它承载着我们整个前端项目UI的实现。UI实现往往是一个前端项目中相对费神费时却又至关重要的,因为它直接关系到用户的第一印象以及体验。Css是UI的具体实现,对css架构的好坏很多时候会直接影响到项目的后期的开发进度以及成本。尤其是在对碰到项目UI改版,主题定制等,对Css将是一个大考验。


Css是一个在项目构建之初就应该根据项目的UI进行架构以及不断优化的,只有经过不断的精雕细琢才能让自己项目的css趋向完美,在后期开发中达到事半功倍的效果。



小记根据这几年的工作经验,觉得一个前端项目中至少应该包含一些基础的Css文件,同时建议在项目中尽量使用CSS预处理语言(Less/Sass
),由于使用习惯问题下文将以less为示例。


1. CSS Reset


CSS Reset 的存在是由于不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一“起跑线”。而现代浏览器在这方面的差异已经小了很多,所以现在也有部分开发者提倡去掉 CSS Reset。知乎上还有相关的讨论,感兴趣的可以去看看
到底该不该用 CSS reset?



我个人还是推荐用。虽然差异减少,但是毕竟还是存在,尤其是如果需要高保真还原设计稿,并且你们的设计师还有一双像素
的话,那么设计师是不会允许这些差异的。



而我习惯使用的是normalize.css


/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
2. variable

variable 这个通常放一些全局的变量,可以在各个样式文件中复用的通用性的变量。比如说,主题色,边框色,特定元素的内外边距(h1, h2, h3, p…), 字体色等等。


// variable.less
@themecolor: #f3f4f6;
@bordercolor: #ddd;
@border-t: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
@border-b: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
@border-l: -webkit-gradient(linear, right top, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
@border-r: -webkit-gradient(linear, left top, right top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor));
@stable-bg: #f8f8f8;
@default-bg: #fff;
@positive-bg: #18b4ed;
@mask-bg: rgba(0,0,0,.4);
@input-wrap-bg: #ebeced;
@txt-default: #333;
@txt-info: #999;
@txt-muted: #ccc;
@txt-warning: #ff4222;
@txt-highlight: #ff8444;
@txt-link: #00a5e0;
@txt-feeds: #314c83;
... // 根据自己项目的实际来定义
3. Animates


顾名思义,Animates 文件里应该放上当前项目中需要的、实现的一些动画。单独把动画抽出可以方便整理以及复用。css 动画库推荐Animate.css


// animate.less
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes RotatePlus360 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes RotatePlus360 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.rotate {
.animated;
-webkit-animation-name: RotatePlus360;
animation-name: RotatePlus360;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
.animated;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutH {
from {
opacity: 1;
-webkit-transform: none;
transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutH {
from {
opacity: 1;
-webkit-transform: none;
transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutH {
.animated;
-webkit-animation-name: fadeOutH;
animation-name: fadeOutH;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
.animated;
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
.animated;
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
.animated;
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
.animated;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
.animated;
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
.animated;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
.animated;
-webkit-animation-name: pulse;
animation-name: pulse;
}
4. Base

base 里面则主要放一些公用类。


@charset "UTF-8";
@import 'reset';
@import 'variable';
html {
font-size: 120px;
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
@media screen and (max-width: 319px) {
html {
font-size: 85.33333px;
}
}
@media screen and (min-width: 320px) and (max-width: 359px) {
html {
font-size: 85.33333px;
}
}
@media screen and (min-width: 360px) and (max-width: 374px) {
html {
font-size: 96px;
}
}
@media screen and (min-width: 375px) and (max-width: 383px) {
html {
font-size: 100px;
}
}
@media screen and (min-width: 384px) and (max-width: 399px) {
html {
font-size: 102.4px;
}
}
@media screen and (min-width: 400px) and (max-width: 413px) {
html {
font-size: 106.66667px;
}
}
@media screen and (min-width: 414px) and (max-width: 1024px) {
html {
font-size: 110.4px;
}
}
body {
position: relative;
min-width: 320px;
width: 100%;
font-size: .14rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
line-height: 1.5;
color: @txt-default;
background: #fff;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
:root body {
position: absolute;
}
.hidden {
display: none !important;
visibility: hidden;
}
.clearfix {
zoom: 1;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.border-t {
border-top: 1px solid @bordercolor;
}
.border-b {
border-bottom: 1px solid @bordercolor;
}
.border-tb {
border-top: @bordercolor 1px solid;
border-bottom: @bordercolor 1px solid;
background-image: none;
}
.border-l {
border-left: 1px solid @bordercolor;
}
.border-r {
border-right: 1px solid @bordercolor;
}
.border {
border: 1px solid @bordercolor;
}
.border-radius {
border: 1px solid @bordercolor;
border-radius: 4px;
}
.ellipsis {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ellipsis-flex {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
-webkit-box-flex: 1;
height: inherit;
}
.nowrapmulti {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.tl {
text-align: left;
}
.fs12 {
font-size: .12rem;
}
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.fl {
float: left;
}
.fr {
float: right;
}
.tl {
text-align: left;
}
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.clx:after {
clear: both;
display: block;
height: 0;
visibility: hidden;
content: "";
}
.clx {
*zoom: 1;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-radius {
position: relative;
border: 0;
}
.border-radius:before {
content: "";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #dbdbdb;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
padding: 1px;
-webkit-box-sizing: border-box;
border-radius: 8px;
pointer-events: none;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border {
position: relative;
border: 0;
}
.border-t,
.border-b,
.border-l,
.border-r,
.border-tb {
border: 0;
}
.border-t {
background-position: left top;
background-image: @border-t;
}
.border-b {
background-position: left bottom;
background-image: @border-b;
}
.border-t,
.border-b,
.border-tb {
background-repeat: repeat-x;
-webkit-background-size: 100% 1px;
}
.border-tb {
background-image: @border-tb;
background-position: top, bottom;
}
.border-l {
background-position: left top;
background-image: @border-l;
}
.border-r {
background-position: right top;
background-image: @border-r;
}
.border-l,
.border-r {
background-repeat: repeat-y;
-webkit-background-size: 1px 100%;
}
.border:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #dbdbdb));
-webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
-webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right, bottom, left;
padding: 1px;
-webkit-box-sizing: border-box;
z-index: 10;
pointer-events: none;
}
}

在以上文件为基础下,剩下的就是各个页面具体样式。



有任何问题欢迎留言交流



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台