摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會(huì)編譯成可以看到，生成的中并沒有任何的變化，那這個(gè)做了什么呢其實(shí)在通過引用的對(duì)象內(nèi)發(fā)生了變化。

作為一個(gè)前端，毫無疑問css肯定是最基礎(chǔ)的一項(xiàng)技能之一。css是一個(gè)標(biāo)記語言，沒有編程語言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。
在追求效率和自動(dòng)化的當(dāng)下，涌現(xiàn)了一批解決方案，像是css預(yù)編譯語言Less, Sass等，解決css命名沖突的css-modules，react中css的最佳實(shí)踐styled-components等。
本篇文章不在于探討css的技巧學(xué)習(xí)，而在于討論css的這些提升開發(fā)效率的方案。

Less, Sass, Stylus等 css預(yù)編譯語言，給css賦予了編程特性。拿 Less 來說，它擴(kuò)展了 CSS 語言，增加了變量、Extend、Mixin、函數(shù)等特性，也支持import導(dǎo)入文件，使 CSS 更易維護(hù)和擴(kuò)展。本篇簡(jiǎn)單介紹一下Less的一些特性，詳細(xì)的教程可以上Less官網(wǎng)查看。

我們可以在 命令行 直接使用less，也可以通過 node api 去使用less，或者通過 webpack，gulp，grunt等的 less插件 去使用，甚至可以在瀏覽器端使用，非常靈活。這里簡(jiǎn)單說一下在命令行中使用less。

$ npm i less -g
# 當(dāng)less被安裝之后，就可以使用全局命令lessc
$ lessc bootstrap.less bootstrap.css

變量使css代碼更易維護(hù)。

比如有個(gè)主色 #ef8376，在整個(gè)樣式表中，我們有多處使用這個(gè)顏色。如果主色變動(dòng)的話，比如主色要變成 #000，我們就要手動(dòng)去全局替換這個(gè)變量，而有一些 #ef8376我們卻不希望替換掉，這樣就造成了極大的困擾。

如果我們使用less的話，就可以這么寫：

@primaryColor: #ef8376;

.banner {
  background-color: @primaryColor;
  .text {
    color: @primaryColor;
    border-color: #ef8376;
  }
}

我們要修改主色，只需要將 @primaryColor 修改為 "#000"即可。

Extend讓我們可以用偽類的寫法去合并一些類。

比如：

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

會(huì)編譯成：

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

Mixin既有Extend繼承已有類的特性，也有其他高級(jí)的特性，比如支持變量，支持像使用方法一樣使用mixin

支持變量

.foo (@bg, @color: "#000") {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo(#f5f5f5);
}
.important {
  .foo(#121212) !important;
}

會(huì)編譯成：

.unimportant {
  background: #f5f5f5;
  color: #000;
}
.important {
  background: #121212 !important;
  color: #000 !important;
}

像方法一樣使用Mixin

.count(@x, @y) {
  @margin: ((@x + @y) / 2);
  @padding: ((@x + @y) / 4)
}

div {
  margin: .count(16px, 16px)[@margin];
  padding: .count(16px, 16px)[@padding];
}

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

.text {
  .loop(5); // launch the loop
}

會(huì)編譯成:

div {
  margin: 16px;
  padding: 8px;
}

.text {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

// head.less
.banner {
  background-color: red;
}

// footer.css
.footer {
  background-color: green;
}

@import "./head.less";
@import css "./footer.css";

會(huì)編譯成：

.banner {
  background-color: red;
}
.footer {
  background-color: green;
}

Less支持一些常用的輔助方法

比如darken和lighten用來加深或淡化顏色。

body {
  background-color: darken(hsl(90, 80%, 50%), 20%);
  color: lighten(hsl(90, 80%, 50%), 20%);
}

會(huì)編譯成：

body {
  background-color: #4d8a0f;
  color: #b3f075;
}

css-modules 相較于 Less 來說有所不同，css-modules 只是拓展了 css 的寫法，解決了css的塊作用域和全局作用域，而不是將css變成一門編程語言。

Css一直以來都有一個(gè)問題，就是css定義的類都是全局的，我們雖然可以通過不同的命名空間或是加前綴的方式去避免類的混淆和沖突，但是在寫法上卻不是那么的干凈利落，而且一旦重構(gòu)css的話，也會(huì)造成很大的困擾。

為了讓我們能隨意的寫類名而不需要考慮沖突或是覆蓋，css-modules 便出現(xiàn)了。

css-modules提供了 塊作用域 :local 和 全局作用域 :global，這兩個(gè)特性就能很好的避免css的命名沖突。

首先來說一下怎么使用 css-modules。

當(dāng)我們?cè)谑褂脀ebpack的時(shí)候，最簡(jiǎn)單的用法是通過 css-loader 來開啟對(duì) css-modules 的支持。如下：

{
  test: /.css$/,
  use: [
    {
      loader: "css-loader",
      options: {
        modules: true, // 開啟對(duì)css-modules的支持
        localIdentName: "[name]__[local]___[hash:base64:5]" // 生成的類名的格式
      }
    }
  ]
}

同時(shí)可以配合less-loader 和 postcss使用。注意：在結(jié)合less-loader的時(shí)候可能出現(xiàn)對(duì)url的兼容問題。見：https://github.com/webpack-co... 。而且 less-loader 的維護(hù)者認(rèn)為結(jié)合 less-loader 和 css-modules沒什么必要。。

css-loader - webpack開啟css modules

postcss-modules - postcss的 css-modules 插件

css-modules提供了兩個(gè)關(guān)鍵字，:local 和 :global。

比如這種寫法：

// App.css
:local(.banner) {
  background: red;
}
:local(.banner .text) {
  color: yellow;
}
.center {
  color: green;
}
:global(.global-class-name) {
  color: blue;
}

會(huì)編譯成：

.App__banner___3NbRo {
  background: red;
}
.App__banner___3NbRo .App__text___2j1Ht {
  color: yellow;
}
.App__center___3eDJo {
  background: green;
}
.global-class-name {
  color: blue;
}

:global 聲明的類不會(huì)被編譯，會(huì)保持不變。

同時(shí)，我們?cè)趈s中引入css，寫法如下：

/**
 * styles是什么呢？styles其實(shí)是一個(gè)經(jīng)過處理過的類名的集合。
 * 
 * 比如上邊這個(gè)css文件，處理后的style對(duì)象是這樣的：
 * 
 * {
 *   banner: "App__banner___3NbRo",
 *   text: "App__banner___3NbRo App__text___2j1Ht",
 *   center: "App__center___3eDJo"
 * }
 * 
 * 這樣我們就可以理解為什么css-modules可以避免明明沖突了。
 * 命名都按照我們?cè)O(shè)置的hash規(guī)則重寫了,保證了類名的唯一，并且在生成的html結(jié)構(gòu)里也進(jìn)行了替換，還何來沖突？
 */
import styles from "./App.css";
import React from "react";

const html = () => {
  return 

    HAHAHAHHAHAHA
  
;
};

export default html;

css-modules支持多個(gè)類的混合組成。比如：

.colorRed {
  color: red
}

.text {
  composes: colorRed;
  background: #000;
}

會(huì)編譯成：

.App__colorRed___yoG_f {
  color: red
}

.App__text___2j1Ht {
  background: #000;
}

可以看到，生成的css中并沒有任何的變化，那這個(gè)composes做了什么呢？其實(shí)在通過js引用的對(duì)象內(nèi)發(fā)生了變化。如下：

{
  "colorRed": "App__colorRed___yoG_f",
  "text": "App__text___2j1Ht App__colorRed___yoG_f"
}

那么在通過 styles.text 使用 text 類的時(shí)候，其實(shí)也同時(shí)使用了 colorRed 類，達(dá)到了混合組成的效果。

css-modules 支持引用其他文件的類。

比如：

// green.css
.green {
  color: green;
}

// text.css
.text {
  background-color: red;
  composes: green from "./green.css";
}

會(huì)編譯成：

.green__green___1v20L {
  color: green;
}
.text__text__2jfs0 {
  background-color: red;
}

其實(shí)跟 二 一樣，生成的css并沒有什么改動(dòng)，其實(shí)改變的是生成js對(duì)象的內(nèi)容：

import styles from "./text.css";

// styles = {green: "green__green___1v20L", text: "text__text__2jfs0 green__green___1v20L"}

styled-components, 可能是React中css的最佳實(shí)踐了，如果你喜歡，你也可以叫它styled-react-components : )。想象一下，像寫react組件一樣去寫css，是一種什么樣的體驗(yàn)？

如下，你可以這樣來寫樣式：

import React from "react";
import styled from "styled-components";

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

export default () => 
  
;

styled-components會(huì)自動(dòng)幫你在 運(yùn)行時(shí) 生成一個(gè)樣式表，插入到 下的