如何快乐的写CSS？？

随着前端发展的越来越快，尤其是JS语言模块化成为标准，ES678快速普及前端工程越来越成熟，但是CSS却被远远甩在了后面，CSS还在不断的探索中，这中间诞生了LESS，SASS预处理语言，开发者不断去寻找CSS工程化的最佳实践

写CSS时的几个奔溃瞬间

• 命名难的要命：命名这个应该是老生常谈的问题，在各个语言中都存在；为了不重复就会有各种奇葩的名字出现，这里推荐一个网站可能会有点用codelf
• 选择器的全局污染：改了一个样式会影响很多地方
• 样式难以复用：需要写很多重复的代码，不像js函数那样可以复用，我们不是代码的生成者，只是代码的搬运工，码农万岁，真是世代“务农”啊
• 不好维护：尤其是项目经历了很多开发者之后，语义不详，强制!important，都有一种吊打上一个写代码的人冲动

如何心情愉悦的写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.js
import 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.js
import 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';

@Component
export 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>