CSS模塊化方案

1.1 CSS 命名方法

通過人工的方式來約定命名規(guī)則

BEM是一種典型的 CSS 命名方法論,BEM的命名規(guī)矩就是block-name__element-name--modifier-name，也就是模塊名 + 元素名 + 修飾器名

OOCSS（Object-Oriented CSS）即面向?qū)ο蟮?CSS，它借鑒了 OOP（面向?qū)ο缶幊蹋┑某橄笏季S，主張將元素的樣式抽象成多個獨立的小型樣式類，來提高樣式的靈活性和可重用性。

ITCSS（Inverted Triangle CSS，倒三角 CSS）是一套方便擴展和管理的 CSS 體系架構(gòu)，它兼容 BEM、OOCSS、SMACSS 等 CSS 命名方法論

SMACSS即可伸縮及模塊化的 CSS 結(jié)構(gòu)

.block__element {    display: none;}.block__element--active {    display: block;}

1.2 CSS Modules

CSS Modules：一個 CSS 文件就是一個獨立的模塊,核心思想是 通過組件名的唯一性來保證選擇器的唯一性，從而保證樣式不會污染到組件外

CSS Modules允許我們像 import 一個 JS Module 一樣去 import 一個 CSS Module.每一個 CSS 文件都是一個獨立的模塊，每一個類名都是該模塊所導(dǎo)出對象的一個屬性。通過這種方式，便可在使用時明確指定所引用的 CSS 樣式。并且，CSS Modules 在打包時會自動將 id 和 class 混淆成全局唯一的 hash 值，從而避免發(fā)生命名沖突問題。

使用 CSS Modules 時，推薦配合 CSS 預(yù)處理器（Sass/Less/Stylus）一起使用 CSS 預(yù)處理器提供了許多有用的功能，如嵌套、變量、mixins、functions 等，同時也讓定義本地名稱或全局名稱變得容易

<template>  <p :class="$style.red">This should be red</p></template>
<style module>.red {  color: red;}</style>

1.3 CSS-in-JS

React 的出現(xiàn)，打破了以前關(guān)注點分離的網(wǎng)頁開發(fā)原則，因其采用組件結(jié)構(gòu)，而組件又強制要求將 HTML、CSS 和 JS 代碼寫在一起。表面上看是技術(shù)的倒退，實際上并不是

React 是在 JS 中實現(xiàn)了對 HTML 和 CSS 的封裝，賦予了 HTML 和 CSS 全新的編程能力。對于 HTML，衍生了 JSX 這種 JS 的語法擴展，你可以將其理解為 HTML-in-JS；對于 CSS，衍生出一系列的第三方庫，用來加強在 JS 中操作 CSS 的能力，它們被稱為 CSS-in-JS

隨著 React 的流行以及組件化開發(fā)模式的深入人心，這種關(guān)注點混合的新寫法逐漸成為主流

注意此功能并不是 React 的一部分，而是由第三方庫提供。比如：Rstyled-components、emotion 等等。

import React from 'react';
import styled from 'styled-components';
// 創(chuàng)建一個 <Title> 組件渲染為 <h1> 標(biāo)簽// 然后給 <h1> 標(biāo)簽加樣式const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred;`;
// 創(chuàng)建一個 <Wrapper> 組件渲染為 <section> 標(biāo)簽// 然后給 <section> 標(biāo)簽加樣式const Wrapper = styled.section`  padding: 4em;  background: papayawhip;`;
// 然后使用帶樣式的組件即可<Wrapper>  <Title>Hello World, this is my first styled component!</Title></Wrapper>