关于前端:如何快乐的写CSS

35次阅读

共计 2385 个字符，预计需要花费 6 分钟才能阅读完成。

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

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

为了共事之间的关系融洽，为了键盘免遭毒手，为了心情愉快，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 模块化不得不提几个概念 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>

正文完