首页 > Web开发 > 详细

浅谈CSS的模块化

时间:2019-08-23 17:27:51      阅读:91      评论:0      收藏:0      [点我收藏+]

一、简介

  • 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的模块化

原文:https://www.cnblogs.com/wxh0929/p/11401221.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!