CSS Modules是啥子東西？一起來了解一下！

今年四月份的時候面試了一家公司，

技術面的時候被人家問到了CSS Module有了解過么，我說沒有了解過，

他就繼續問到，那你在平時開發的時候給組件和元素起類名要怎么辦呢？
我說給元素和組件加指定前綴，這樣就能夠保證自己寫的類名和其他同事寫的類名不會起沖突。

然后就沒然后了，，后續又問了我很多React原理啥的面試就過了。

今天我們就把CSS Modules是個啥子東西給他弄明白，這樣會更加分。

【推薦教程：CSS視頻教程 】

首先我們來看一張圖：

一張圖理解 CSS Modules 的工作原理：

我們自己編碼的時候有倆個文件，一個是ProductList.less文件，一個是ProductList.jsx文件
在構建之后會將less文件轉換成藍色標題的那個文件。

可以由此看出：

• button class在構建之后會被重命名為ProductList_button_1FU0u。button是local name，而 ProductList_button_1FU0u 是 global name 。你可以用簡短的描述性名字，而不需要關心命名沖突問題。

然后你要做的全部事情就是在 css/less 文件里寫 .button {…}，并在組件里通過 styles.button 來引用他。

定義全局CSS

CSS Modules默認是局部作用域的，想要聲名一個全局規則，可用:global語法。

比如：

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

在引用的時候：

<App className={styles.title} /> // red <App className="title" />        // green

classnames Package

在一些復雜場景中，一個元素可能對應多個className，而每個className又基于一些條件來決定是否出現。這時，classnames這個庫就非常有用。

import classnames from 'classnames'; const App = (props) => { 	const cls = classnames({ 		btn: true, 		btnLarge: props.type === 'submit', 		btnSmall: props.type === 'edit', 	}); 	return <div className={ cls } />; }

這樣，傳入不同的 type 給 App 組件，就會返回不同的 className 組合：

<App type="submit" /> // btn btnLarge <App type="edit" />   // btn btnSmall