浅谈CSS的模块化 | 易学教程

一、简介

Web前端模块化：HTML模块化、CSS模块化以及JS模块化三个部分；

二、CSS模块化背景

对于小型项目来说，css的量还不至于庞大，问题没有凸显，而如果要开发和持续维护一个较为大型的项目，那就需要对css进行管理和规范了，否则会发生不可挽回的后果（吓唬谁呢？？）。

.dossierList-Head{
    width: 94%;
    height: 8%;
    margin-left: 3%;
    margin-right: 3%;
    display: flex;
    justify-content: space-between;
    align-items: center
}
.dossierList-Head .head_left{
  width: 100%;
  height: 100%;
  display: flex;
  align-items:center;
}
.dossierList-Head .head_left .logo{
  width: 43px;
  height: 50px;
  padding-right: 5px;
}
.dossierList-Head .head_left h1{
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 2px;
  background-image: linear-gradient(0deg, 
    #6cffff 33%, 
    #b6ffff 45%, 
    #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.875rem;
  display: flex;
  align-items: center;
}

View Code

我们可以看出这是以前的css样式，而这种写法存在以下问题