浅谈CSS的模块化

一、简介

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

二、CSS模块化背景

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

• .dossierList-Head{
      width: %;
      height: %;
      margin-left: %;
      margin-right: %;
      display: flex;
      justify-content: space-between;
      align-items: center
  }
  .dossierList-Head .head_left{
    width: %;
    height: %;
    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 %,
      #b6ffff %,
      #ffffff %);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: .875rem;
    display: flex;
    align-items: center;
  }

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

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

三、CSS代码规范

• 通常使用网易的NEC

四、亲爱的小伙伴们，最近进了项目组，太忙了，等完成之后再给大家更新哦

五、