Before..

Traditional CSS：

• css by page  需要引入很多css檔案
• 模組化困難、重用性低
• 上線前需要壓縮的程序
• css命名易衝突 （Global namespace）
• 階層過多降低效率

SASS..

很好很強大..但仍有以下問題

• import file 目錄結構複雜
• 仍然有Global namespace的問題
• 需要另外起compiler且效能低落
• 可怕的巢狀命名，編譯出來的code效能慘烈
• 有很多很好的撰寫規範...可是最後發現只有自己在遵守

CSS Modules

awesome for web component

Local CSS

假如我們今天要有一個button擁有四種狀態，而在不同的頁面又有不同的顏色的話，CSS該怎麼寫呢？

In SCSS

.button{
    //button 共用屬性
    &.button-special { 
        //button-special 共用屬性
        &.normal { ... }
        &.disabled { ... }
        &.touched { ... }
    }
    &.button-normal {
        //button-normal 共用屬性
        &.disabled { ... }
    }
}

.PageA{
    .button { ... }
    .button-special { ... }
    .button-normal { ... }
}
.PageB{
    .button { ... }
    .button-special { ... }
    .button-normal { ... }
}

button.scss

page.scss

CSS modules

.button{
    //button 共用屬性
}
.normal { ... }
.disabled { ... }
.touched { ... }

button.css

//依據使用者行為切換state狀態
return(
    <button styleName="button 
                     { this.state.buttonState }">
    </button>
)

button.jsx

Benefit

• Local NameSpace，不會牽一髮而動全身
• 自己的compoent自己管，職責清楚易找
• 不需要前處理的compiler
• 不需要複雜難記的撰寫規範
• Class命名這件事變得很簡單

MIXIN/EXTEND?

Using compose

.common { /* font-sizes, padding, border-radius */ }
.normal { composes: common; /* blue color, light blue background */ }
.error { composes: common; /* red color, light red background */ }

.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
.components_submit_button__normal__def6547 { /* blue color, light blue background */ }
.components_submit_button__error__1638bcd { /* red color, light red background */ }

Vendor CSS?

作者不建議，不過我的建議寫法如下：

//index.html
<link rel="stylesheet" href='/vendor/vendor.css'/>

//compoent.jsx

@import style from './style.css';
return(
    <div styleName="mycssClassName">
        <div className="vendorCssClassName">
    </div>
)

Usage

Install

{
    test: /\.css$/,
    loader: "style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]",
    include: __dirname
}

Loader

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install react-css-modules --save-dev
npm install css-module-require-hook --save-dev

Require-hook ( for isomorphic )

import CSSModules from 'react-css-modules';

export default connect(mapStateToProps, { loadDemo })(CSSModules(Demo,style));

component decorator

( using styleName syntax )

hook({
    generateScopedName: '[name]__[local]___[hash:base64:5]',
});

Document

 Github

https://github.com/gajus/react-css-modules

POSTCSS

未來css的趨勢：後處理器

css-modules也是postcss的一種實作喔～

SASS POSTCSS

前處理器

後處理器

SASS 

前處理器

• 需要編譯（效能成本）
• 寫之前必須學會SASS語法（教育訓練成本）
• 開發人員必須對瀏覽器支援度很瞭解

POSTCSS

• 不需另外起編譯程序
• 不用額外學語法（原生css即可）
• 開發套件人員可以不是實際撰寫css的人

• 套件更新速度很快，必須時常follow最新資訊

Plugin

• auto-prefixer  自動加上瀏覽器前綴
• cssnext  使用css4等下世代的css語法
• stylelint  幫你找出不好的css寫法
• doiuse   檢查css語法在瀏覽器上的支援度

常用的幾種套件