随着前端倒退的越来越快，尤其是JS语言模块化成为规范，ES678疾速遍及前端工程越来越成熟，然而CSS却被远远甩在了前面，CSS还在一直的摸索中，这两头诞生了LESS，SASS预处理语言，开发者一直去寻找CSS工程化的最佳实际

写CSS时的几个奔溃霎时

  • 命名难的要命：命名这个应该是陈词滥调的问题，在各个语言中都存在；为了不反复就会有各种奇葩的名字呈现，这里举荐一个网站可能会有点用codelf
  • 选择器的全局净化：改了一个款式会影响很多中央
  • 款式难以复用：须要写很多反复的代码，不像js函数那样能够复用，咱们不是代码的生成者，只是代码的搬运工，码农万岁，真是世代“务农”啊
  • 不好保护：尤其是我的项目经验了很多开发者之后，语义不详，强制!important，都有一种吊打上一个写代码的人激动

<p style="text-align:center;"><img src="https://i03piccdn.sogoucdn.com/509a533663d9f36d" alt="好受想哭"></p>

如何情绪愉悦的写CSS

为了共事之间的关系融洽，为了键盘免遭毒手，为了心情愉快，CSS的工程化火烧眉毛

预处理器

先上栗子

<div class="box-container">  <div class="boxs">    <div class="box-item">      <span class="item"></span>    </div>  </div></div>

下面的构造你要怎么写css呢
1.俄罗斯套娃，这样能够解决全局净化问题，你只须要批改最下面的父级的名称就能够新一波的套娃了。然而这样写进去的代码容易被骂，代码冗余，可读性差

.box-container {  color: #000;}.box-container .boxs {  color: orange;}.box-container .boxs .box-item {  color: yellow;}.box .boxs .box-item .item {  color: green;}

2.上面代码很清晰，解决了冗余的问题，然而随着我的项目的变大，命名是个问题，于是有了很多奇怪的命名

.box-container {  color: red;}.boxs {  color: orange;}.box-item {  color: yellow;}.item {  color: green;}

那么预处理又是什么，对于老司机来说就不用说了，萌新能够看一下->传送门，
这里是一些最风行的CSS预处理器:Sass、LESS、tylus、PostCSS

预处理器加强了 CSS 的语法。让规范 CSS 具备了以下的这些能力

  • 变量
  • 混合（Mixin）Extend
  • 嵌套规定
  • 运算
  • 函数
  • Namespaces & Accessors（命名空间和拜访器）
  • scope

以上风行的预处理器就不一一介绍，官网很具体的

后处理器

它解决的对象是规范的CSS，对其进行兼容性、优化等操作，不须要开发关怀；
最终的代码是体积小，CSS3前缀等特点的css代码

代表的插件

  • clean-css：压缩CSS
  • AutoPrefixer：主动增加 CSS3 属性各浏览器的前缀

CSS Modules

以上只是写代码的时候解决了代码重复使用问题，以及手动写嵌套等问题，没有真正解决全局净化的问题
说到将CSS模块化不得不提几个概念CSS in JS scope,大家能够去自行学习，这外面小编感觉CSS Modules简略又能解决问题

/* Button.css */.primary {    background-color: #1aad19;    color: #fff;    border: none;    border-radius: 5px;}
// Button.jsimport styles from './Button.css';console.log(styles); // -> {primary: "yTXmm0isaXExoYiZUvKxH"}const Button = document.createElement('div')Button.innerHTML = `<button class=${styles.primary}>Submit</button>`export default Button// index.jsimport Button from './components/Button'const app = document.getElementById('root')app.appendChild(Button)

生成的HTML

<div id="root">    <div>        <button class="yTXmm0isaXExoYiZUvKxH">Submit</button>    </div></div>

当然须要webpack打包工具以及各种loader和插件的配合，就VUE来说，间接就能够开启
官网传送

<template>  <div id="app">    <div :class="$style.abc">      <div :class="[$style.c,{dd:true},'b']"></div>      <div :class="[$style.b]"></div>    </div>  </div></template><script lang="ts">import { Component, Mixins } from 'vue-property-decorator';import MyMixin from '@/mixin';@Componentexport default class Index extends Mixins(MyMixin) {}</script><style lang="less">.b {  color: #999;}</style>// 重点、重点、重点、重点、重点<style module lang="less">.abc {  color: #000;  .b {    color: #888;  }}</style>