浅谈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样式，而这种写法存在以下问题

  • 选择器繁琐冗长、书写累赘；（因为不支持嵌套）
  • 层级结构不清晰，不知是父子关系还是兄弟关系
  • 维护起来异常困难
  • 代码难以复用（因为有时候会出现命名污染）

三、CSS代码规范

• 通常使用网易的NEC

四、

五、