資訊專欄INFORMATION COLUMN
摘要：局部樣式通過，部分解決的模塊化的問題。全局樣式的特點，導致難以維護，所以需要一種局部樣式的解決方案。也就是徹底的模塊化，進來的模塊，需要隱藏自己的內部作用域。
css “局部”樣式
sass、less 通過 @import ，部分解決的 css 模塊化的問題。
由于 css 是全局的，在被引入的文件和當前文件出現重名的情況下，前者樣式就會被后者覆蓋。
在引入一些公用組件，或者多人協作開發(fā)同一頁面的時候，就需要考慮樣式會不會被覆蓋，這很麻煩。
// file A
.name {
color: red
}
// file B
@import "A.scss";
.name {
color: green
}
css 全局樣式的特點，導致 css 難以維護，所以需要一種 css “局部”樣式的解決方案。
也就是徹底的 css 模塊化，@import 進來的 css 模塊，需要隱藏自己的內部作用域。
通過在每個 class 名后帶一個獨一無二 hash 值，這樣就不有存在全局命名沖突的問題了。這樣就相當于偽造了“局部”樣式。
// 原始樣式 styles.css
.title {
color: red;
}
// 原始模板 demo.html
import styles from "styles.css";
Hello World
// 編譯后的 styles.css
.title_3zyde {
color: red;
}
// 編譯后的 demo.html
Hello World
webpack 與 CSS Modules
webpack 自帶的 css-loader 組件，自帶了 CSS Modules，通過簡單的配置即可使用。
{
test: /.css$/,
loader: "css?modules&localIdentName=[name]__[local]--[hash:base64:5]"
}
命名規(guī)范是從 BEM 擴展而來。
Block: 對應模塊名 [name]
Element: 對應節(jié)點名 [local]
Modifier: 對應節(jié)點狀態(tài) [hash:base64:5]
使用 __ 和 -- 是為了區(qū)塊內單詞的分割節(jié)點區(qū)分開來。
最終 class 名為 styles__title--3zyde。
在實際生產中，結合 sass 使用會更加便利。以下是結合 sass 使用的 webpack 的配置文件。
{
test: /.scss$/,
loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
}
通常除了局部樣式，還需要全局樣式，比如 base.css 等基礎文件。
將公用樣式文件和組件樣式文件分別放入到兩個不同的目標下。如下。
.
├── app
│ ├── styles # 公用樣式
│ │ ├── app.scss
│ │ └── base.scss
│ │
│ └── components # 組件
├── Component.jsx # 組件模板
└── Component.scss # 組件樣式
然后通過 webpack 配置，將在 app/styles 文件夾的外的(exclude) scss 文件"局部"化。
{
test: /.scss$/,
exclude: path.resolve(__dirname, "app/styles"),
loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
},
{
test: /.scss$/,
include: path.resolve(__dirname, "app/styles"),
loader: "style!css?sass?sourceMap=true&sourceMapContents=true"
}
有時候，一個元素有多個 class 名，可以通過 join(" ") 或字符串模版的方式來給元素添加多個 class 名。
// join-react.jsxHello World
// stringTemp-react.jsxHello World
如果只寫一個 class 就能把樣式定義好，那么最好把所有樣式寫在一個 class 中。
所以，如果我們使用了多個 class 定義樣式，通常會帶一些一些邏輯判斷。這個時候寫起來就會麻煩不少。
引入 classnames ，即可以解決給元素寫多個 class 名的問題，也可以解決寫邏輯判斷的麻煩問題。
classNames("foo", "bar"); // => "foo bar"
classNames("foo", { bar: true }); // => "foo bar"
classNames({ "foo-bar": true }); // => "foo-bar"
classNames({ "foo-bar": false }); // => ""
classNames({ foo: true }, { bar: true }); // => "foo bar"
classNames({ foo: true, bar: true }); // => "foo bar"
// lots of arguments of various types
classNames("foo", { bar: true, duck: false }, "baz", { quux: true }); // => "foo bar baz quux"
// other falsy values are just ignored
classNames(null, false, "bar", undefined, 0, 1, { baz: null }, ""); // => "bar 1"
引入 CSS Modules 的樣式模塊，每個 class 每次都要寫 styles.xxx 也是很麻煩，在《深入React技術?！诽岬搅?react-css-modules 的庫，來減少代碼的書寫，感興趣的同學可以研究下。
參考資料：
《深入React技術?！?br>css-modules
CSS Modules 用法教程
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/115484.html
摘要：通過使用或者從中導入文件使得模塊被編譯成為可能。模塊一次只運行一個文件，這樣可以避免全局上下文的污染。下面讓我們用重構這些這些代碼這是一個進化版，但是我們僅僅只達到了一部分目標。 原文：http://glenmaddern.com/articl...譯者：@公子 如果你想知道 CSS 最近發(fā)展的轉折點，你應該選擇去觀看 Christopher Chedeau 在2014年11月的 N...
摘要：父類為，代表著一系列文章的列表。對于可讀性較好地與代碼，不應該像一本書，而應該像一個故事，一個故事中會存在角色和角色之間的關系，而這種更多的語義化地可以較好地提示你整個代碼的可維護性。無論哪種文件組織方式比較順眼，你都應該遵循統一的原則。 原文地址。本文從屬于Web 前端入門與最佳實踐。 CSS的學習是一個典型的低門檻，高瓶頸的過程，第一次接觸CSS的時候覺得一切是如此簡單，直到后面越...
摘要：網格單元格網格單元格是指四條網格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網格區(qū)域是行線和列線之間的區(qū)域，其主要包括了四個網格單元格。 CSS Grid現在已經被W3C納入到CSS3的一個布局模塊當中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網格或者柵格，也就是早期的960gs。不管是網格還是柵格或者現在的CSS Gr...
摘要：官網是圍繞構建的，是一個免費的開源框架。官網在壓縮后僅為，以移動優(yōu)先的理念為中心。官網被稱為輕量級響應式現代化，是一個基于的框架。通過添加主題或自定義組件能夠幫你進一步開發(fā)個性化的。官網有時框架可以包含僅對其原始開發(fā)人員有意義的類名。 翻譯：瘋狂的技術宅原文：https://1stwebdesigner.com/mo... 本文首發(fā)微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的...
閱讀 821·2021-11-25 09:43
閱讀 1689·2021-09-29 09:42
閱讀 1901·2019-08-30 15:55
閱讀 3423·2019-08-30 15:54
閱讀 2629·2019-08-30 13:20
閱讀 3513·2019-08-29 13:25
閱讀 925·2019-08-28 18:03
閱讀 1787·2019-08-26 13:44
