css模塊化

後來看到阮一峯老師的博客，寫得簡潔易懂，引用了幾段示例代碼。在構建項目的時候，css modules本質上只是藉助構建工具對css文件進行編譯實現類名的局域化和依賴管理而已。

----------------------------

這幾年前端的發展確實處在一個急劇變化的時期，ES六、前端工程化、數據操縱視圖的思想、各類框架和工具的誕生和普及。可是隨着這段時期的變革，我以爲日後的一段時間技術社區應該會迴歸一段相對穩定的生態。

這些年來，相比於前端走向工程化、模塊化的推動和JS層面上的革新和衆多工具框架的誕生，css的發展相對緩慢。雖然sass、less等預處理器給咱們帶來了便利，但並無解決模塊化開發的一個痛點--全局污染。

目前社區的探索分兩個方向，一部分人試圖將css歸入js操縱的範疇，好比用js寫css，方便動態更新樣式；一部分人只是用js來管理css的依賴，表明做是css modules。

在css modules中，一個css module其實就是一個css文件，這個文件中的類名和動畫名默認處於局部做用域中。當這個css文件被引入到一個js文件中使用時，css文件的輸入是做爲一個js對象被調用的。

/* style.css */
.className {
  color: green;
}

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

這跟js模塊是否是很相似？

網上很多文章在介紹css modules時，使用的都是webpack的css-loader，由於它對css modules支持很好，並且使用方便。

 1   module: {
 2     loaders: [
 3       {
 4         test: /\.jsx?$/,
 5         exclude: /node_modules/,
 6         loader: 'babel',
 7         query: {
 8           presets: ['es2015', 'stage-0', 'react']
 9         }
10       },
11       {
12         test: /\.css$/,
13         loader: "style-loader!css-loader?modules"
14       },
15     ]
16   }

在css-loader的配置項中，「？」後面添加了modules字段表示打開css modules功能。

局部做用域：

css modules 推薦本地命名 類名稱 的時候採用駝峯寫法className而不是class-name。這是爲了方便使用點語法(style.className)。固然class-name寫法也是能夠的。編譯後，css文件和html文檔中的類名會被編譯成一個哈希值，以實現命名區分。

全局做用域：

css modules提供了一個：global(.className)語法，容許咱們定義全局的類名，在html文檔中直接寫全局類名便可：

:global(.title) {
  color: green;
}

export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

定製哈希值：

css modules默認哈希算法是[hash:base64],但咱們能夠在webpack中本身定義格式：

1 module: {
2   loaders: [
3     // ...
4     {
5       test: /\.css$/,
6       loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
7     },
8   ]
9 }

composes組合樣式：

css modules並非單純管理css文件的依賴和實現局部類名，也提供了一些靈活的方式讓咱們實現樣式代碼複用，好比composes關鍵字實現類的樣式繼承，就像sass中的mixin：

.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}

繼承其餘css模塊的類樣式：

.title {
  composes: className from './another.css';
  color: red;
}

變量：

 css modules也可使用變量，可是須要安裝postcss和插件postcss-modules-values。

將postcss引入webpack.config.js

下面是阮一峯老師博客上的示例：

//colors.css
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

//app.css
@value colors: "./colors.css";
@value blue, red, green from colors;

.title {
  color: red;
  background-color: blue;
}

可見，css modules藉助postcss插件實現的變量機制主要是用@value作變量定義，在其餘地方引用。感受沒有sass簡潔靈活。