面試官靈魂發問：你是如何組織管理你的 CSS 程式碼的？
答：先寫類名， 然後寫樣式。
卒，享年18.
藉由這個面試題目， 我們來了解 css 管理方式一共有幾種。
首先寫列個大綱:
佛性選手, 複製貼上一把梭. 名稱空間名稱空間 + BEM 規範CSS module css in js方案一. 名稱空間 + BEM 規範
原理：強行增加一個最外層的名稱空間將底部樣式包裹起來。
A.less
.componentA { .title { color: red; } .des { ... }}.componentB { .title { color: red; } .des { ... }}樣式名遵循 BEM 規範， 讓維護者可以從類名就分辨出 dom 上的巢狀情況。方便維護， 如下程式碼：
.componentA { &__title { font-size: 14px; }}<div class="componentA"> <h1 class="componentA__title">元件A的title</h1></div>\\樣式名遵循 BEM 規範， 讓維護者可以從類名就分辨出 dom 上的巢狀情況。方便維護， 如下程式碼：
.componentA { &__title { font-size: 14px; }}<div class="componentA"> <h1 class="componentA__title">元件A的title</h1></div>該方案適用於元件庫的編寫。作為一個規範的 BEM ，使用者更容易使用。但是如果在一個龐大的業務中， 如果我們只用 BEM + 名稱空間來控制樣式不重疊， 就有點力不從心了。你不可能每開始一個需求， 就查一下目前有多少名稱空間。維護變得很困難。
所以， 基於這種方案之下， 又延伸了 2種 CSS 管理方案
方案二：CSS in JS方案三：CSS Modules方案二. CSS in JS
語法如下：
import React from 'react';import styled from 'styled-components';const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred;`;<Title> Hello World, this is my first styled component!</Title>emmm， 仁者見仁， 智者見智。如果喜歡這種方式，可以嘗試使用。作者沒有采用這種方案， 比較喜歡 js 跟 css 隔離的感覺。沒有實踐沒有發言權, 所以就不贅述了.
方案三. CSS Modules
原理：利用 webpack 等構建工具自動將類名轉換成區域性。
詳細配置: https://webpack.docschina.org/loaders/css-loader/
比如， 配置樣式名規則
{ loader: 'css-loader', options: { importLoaders: 2, modules: isModules, localIdentName: '[name]__[local]__[hash:base64:5]' }}import React from 'react';import style from './App.css';export default () => { return ( <h1 className={style.title}> Hello World </h1> );};在 app.css 中
.title { color: red;}可是這種方法有很多限制, 如下:
無論何時構造類名，都必須使用styles物件。混合CSS模組和全域性CSS類是很麻煩的。對未定義的CSS模組的引用解析為未定義，沒有警告。基於上面的問題, react 有一個外掛 react-css-modules . 它可以讓你直接寫 styleName 或者 className 來區分是本地類名還是全域性類名. 且通通解決上面的問題.
<div styleName="lock-item" className="lock-global"> 老師列表</div>編譯後的 CSS，classname 根據配置的規則生成了對應的名字。
可以看到, className 的並不會根據 webpack 的 配置生成對應的類名, styleName 則會.
在書寫樣式時, 也可方便的使用 :global 和 :local 來區分是全域性. :local 是預設注入的, 因此只需要對全域性樣式標明即可.
.lock-item { line-height: 24px; margin-bottom: 8px;}:global .lock-global { color: red;}在 babel-plugin-react-css-modules 中配置如下:
至此, 我們總結一下上面的內容:
1、 名稱空間方案
編寫元件庫使用 BEM 規範 + 名稱空間方案來. 這樣第三方在呼叫的時候, 有規範可言, 且不會隨著打包每次的樣式名都發生改變.
2、css in js / css module 方案
大型業務場景中使用 css modules 或者 css in js。畢竟讓工具來解決問題才是最徹底的解決問題。我們不可能去 diff 每一個地方, 控制大家樣式名不衝突.
好, 看完上面的內容, 大概可以回答一下面試官的靈魂發問了. 時間回溯, 重來一遍.
面試官：你是如何組織管理你的 CSS 程式碼的？
答：分場景. 一. 在編寫公共元件庫的時候, 使用 BEM + 名稱空間 …… 二. ……
面試官: 那 css module 中, 你們如何處理引入的第三方庫樣式?
答: css module 中有可以開啟 module 和關閉module的選項. 對於第三方庫樣式, 關閉 module 選項即可. 配置如下:
藉助面試這個場景, 來鞏固下知識. 系統地學習下 優雅管理 CSS 的各種方式. 希望對你有幫助~
原文連結：/file/2020/01/10/20200110130119_47730.jpg