浅谈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

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

五、

你可能感兴趣的:(浅谈CSS的模块化)