On modular CSS

I. Introduction

• Modular front-end Web: HTML modular, CSS and JS modular modular three parts;

Two, CSS modular background

• For small projects, it is still not a huge amount of css, the problem is not prominent, but if you want more development and ongoing maintenance of a large-scale project, it needs to manage and regulate css, otherwise irreparable consequences occur ( who scare it ??).
• 

  .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

  We can see that this is the previous css styles, but there is a problem such an approach

  • Selector cumbersome, lengthy, cumbersome writing; (because they do not support nested)
  • Hierarchical structure is not clear, I do not know the relationship between father and son or sibling relationships
  • Extremely difficult to maintain,
  • Code reuse is difficult (because sometimes there will be naming contamination)

Three, CSS code specifications

• NetEase generally use NEC

four,

Fives,