绝色狂妃仙魅小说,玄幻小说排行榜完本,欢乐颂小说结局是什么

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

一文詳解CSS-in-JS

幾年前，如果有人提到用 JavaScript 編寫 HTML 作為構(gòu)建大型網(wǎng)站的一種方式，很多開發(fā)者會當(dāng)這作不可理喻的想法，但是現(xiàn)在，使用 React、Vue 和 Angular 框架為組件開發(fā)的應(yīng)用正在慢慢替代傳統(tǒng)的 Web 開發(fā)。

創(chuàng)新互聯(lián)主營花都網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),花都h5重慶小程序開發(fā)搭建,花都網(wǎng)站營銷推廣歡迎花都等地區(qū)企業(yè)咨詢

現(xiàn)在 CSS-in-JS 確實(shí)也有點(diǎn)像當(dāng)年的味道，雖然并不是唯一的解決方案，卻提供了一個很大膽的想法和嘗試。

對現(xiàn)代化的 Web 開發(fā)項(xiàng)目說，CSS 也是如此，CSS 做為 Web 的樣式表來呈現(xiàn)豐富多彩的 Web 應(yīng)用已經(jīng)不再是唯一的選擇了，我們或許應(yīng)該多考慮其他的擴(kuò)展性和移植性嘗試未來的 CSS-in-JS。

一 CSS 的介紹

CSS(層疊樣式表)是一種用來為結(jié)構(gòu)化文檔添加樣式的計(jì)算機(jī)語言，由 W3C 定義和維護(hù)。目前最新版本是 CSS2.1，為 W3C 的推薦標(biāo)準(zhǔn)。CSS3 現(xiàn)在已被大部分現(xiàn)代瀏覽器支持，而下一版的 CSS4 仍在開發(fā)中。

1 模塊和標(biāo)準(zhǔn)化進(jìn)程

CSS Level 2 經(jīng)歷了 9 年的時(shí)間(從 2002 年 8 月到 2011 年 6 月)才達(dá)到 Recommendation(推薦) 狀態(tài)，主要原因是被一些次要特性拖了后腿。為了加快那些已經(jīng)確認(rèn)沒有問題的特性的標(biāo)準(zhǔn)化速度，W3C 的 CSS Working Group(CSS 工作組) 作出了一項(xiàng)被稱為 Beijing doctrine 的決定，將 CSS 劃分為許多小組件，稱之為_模塊_。這些模塊彼此獨(dú)立，按照各自的進(jìn)度來進(jìn)行標(biāo)準(zhǔn)化。其中一些已經(jīng)是 W3C Recommendation 狀態(tài)，也有一些仍是 early Working Drafts(早期工作草案)。當(dāng)新的需求被肯定后，新的模塊也會同樣地添加進(jìn)來。

第一個 CSS 于1996年推出，下面是 CSS 版本的時(shí)間表：

1996年 CSS 1.0發(fā)布
1998年 CSS 2.0發(fā)布
2011年 CSS 2.1發(fā)布
今天，CSS3 模塊擴(kuò)展了 CSS 2.1

2 CSS 模塊狀態(tài)

從形式上來說，CSS3 標(biāo)準(zhǔn)自身已經(jīng)不存在了。每個模塊都被獨(dú)立的標(biāo)準(zhǔn)化，現(xiàn)在標(biāo)準(zhǔn) CSS 包括了修訂后的 CSS2.1 以及完整模塊對它的擴(kuò)充，模塊的 level(級別)數(shù)并不一致?？梢栽诿總€時(shí)間點(diǎn)上為 CSS 標(biāo)準(zhǔn)定義一個 snapshots(快照)，列出 CSS 2.1 和成熟的模塊。

W3C 會定期的發(fā)布這些 snapshots，如 2007, 2010, 2015 或 2017。

目前為止，還沒有 level 超過 3 的模塊被標(biāo)準(zhǔn)化，未來應(yīng)該會有所改變。不過有些模塊，比如 Selectors(選擇器)4 或 CSS Borders and Backgrounds(邊框和背景)Level 4 早已擁有了 Editor's Draft(編輯草案)，即使它們還沒達(dá)到 First Published Working Draft(初次發(fā)布工作草案)狀態(tài)。

3 五種 CSS 設(shè)計(jì)模式

現(xiàn)代化的前端開發(fā)在歷史上發(fā)展了許多的 CSS 設(shè)計(jì)模式，主要發(fā)展出以下幾種：

OOCSS(Object Oriented CSS)
SMACSS(Scalable and Modular Architecture for CSS)
BEM(Block - Element - Modifier)
ITCSS(Inverted Triangle Cascading Style Sheets)
Atomic CSS

其設(shè)計(jì)的原因基本是基于這幾個問題來做優(yōu)化的：

減少選擇器命名和樣式的沖突
清晰的 CSS 整體結(jié)構(gòu)
去除冗余代碼，減少樣式的體積
可重復(fù)利用，組件化的 CSS
提高 CSS 代碼的可讀性

4 Atomic CSS 的歷史

2013/06/10：Brad Frost 發(fā)布了 Atomic Design 文章，在社區(qū)上有一些文章開始討論 Atomic CSS
2015/01/08：《atomic design: the book》一書發(fā)布
2014/10/02：atomizer 項(xiàng)目創(chuàng)建
2017/10/06：tailwindcss 項(xiàng)目創(chuàng)建

Tailwind CSS 和其他預(yù)編譯器相比還是比較的冷門，如下圖：

在 React 和 Vue 日益吞噬的 Web 開發(fā)界中，組件化的思想和工程化日漸成熟，Atomic CSS 也算是比較早推出的一個設(shè)計(jì)思想，筆者覺得 Atomic CSS 能做的事情，在 CSS-in-JS 反而能做的更好，因?yàn)?JS 框架和工具的盛行和豐富，Atomic(原子化)也是未來 CSS-in-JS 一個可以涉足的區(qū)域。

5 CSS 數(shù)學(xué)表達(dá)式

根據(jù) CSSWG 的 draft，CSS 目前支持計(jì)算的數(shù)學(xué)表達(dá)式主要包含五大類：

基本算數(shù)：calc()
比較函數(shù)：min(), max(), clamp()
步進(jìn)函數(shù)：round(), mod(), rem()
三角函數(shù)：sin(), cos(), tan(), asin(), acos(), atan(), atan2()
指數(shù)函數(shù)：pow(), sqrt(), hypot(), log(), exp()

日常使用中 calc() 算是最常用的，一般用來計(jì)算長寬、響應(yīng)式布局等等，而比較函數(shù)在一些場景也可能會用的上，剩下的其他函數(shù)很大部分都沒有機(jī)會在項(xiàng)目中使用的上。

6 CSS Houdini

Houdini是一組底層API，它們公開了CSS引擎的各個部分，從而使開發(fā)人員能夠通過加入瀏覽器渲染引擎的樣式和布局過程來擴(kuò)展CSS。Houdini是一組API，它們使開發(fā)人員可以直接訪問CSS 對象模型 (CSSOM)，使開發(fā)人員可以編寫瀏覽器可以解析為CSS的代碼，從而創(chuàng)建新的CSS功能，而無需等待它們在瀏覽器中本地實(shí)現(xiàn)。

—— 《MDN / CSS Houdini》

如果說 CSS-in-JS 是用現(xiàn)有的標(biāo)準(zhǔn)用 JS 去控制、擴(kuò)展和實(shí)時(shí)聯(lián)動 CSS 的一套方案，那么 CSS Houdini 就相當(dāng)于進(jìn)階版本的 CSS-in-JS，通過公開 CSS 引擎的各個功能，是開發(fā)人員能更好的擴(kuò)展 CSS，筆者認(rèn)為是不是也可以理解為 CSS Houdini 的出現(xiàn)也代表了現(xiàn)在的純 CSS 已經(jīng)很難滿足現(xiàn)在日益豐富的 Web 應(yīng)用。

CSS Houdini

CSS Parser API

這是直接地暴露出 CSS 解析器的 API接口，能夠把任意 CSS 類語言解析成為一種中間類型，定義新的結(jié)構(gòu)。

CSS Properties and Values API

定義一個用來注冊新的 CSS 屬性的 API。通過該 API 注冊的屬性必須用一種特定的解析語法書寫，以定義其類型、繼承行為以及初始值。
CSS Properties and Values API reference
CSS Properties and Values API guide

CSS Typed OM

可以把 CSS Typed OM 視為 CSSOM 2.0，它的目的在于解決目前模型的一些問題，并實(shí)現(xiàn) CSS Parsing API 和 CSS 屬性與值 API 相關(guān)的特性。
CSS Typed OM reference
CSS Typed OM guide

CSS Layout API

被設(shè)計(jì)來提升 CSS 擴(kuò)展性的 API，該 API 能夠讓開發(fā)者去書寫他們自己的布局算法，比如 masonry 或者 line snapping。

CSS Painting API

被設(shè)計(jì)來提升 CSS 擴(kuò)展性的 API，該 API 允許開發(fā)者通過 paint() 方法來寫 JavaScript 函數(shù)，以控制繪制頁面元素的樣式或內(nèi)容區(qū)域。
CSS Painting API reference
CSS Painting API guide

Worklets

該 API 允許腳本獨(dú)立于 JavaScript 執(zhí)行環(huán)境，運(yùn)行在渲染流程的各個階段。
Worklets 在很接近于 JS 的 Web Workers ，由渲染引擎擴(kuò)展并調(diào)用。
Worklets reference

7 CSS 預(yù)處理器 (CSS Preprocessor)

CSS 預(yù)處理器是一個能讓你通過預(yù)處理器自己獨(dú)有的語法來生成 CSS 的程序。市面上有很多 CSS 預(yù)處理器可供選擇，且絕大多數(shù) CSS 預(yù)處理器會增加一些原生 CSS 不具備的特性，例如代碼混合，嵌套選擇器，繼承選擇器等。這些特性讓 CSS 的結(jié)構(gòu)更加具有可讀性且易于維護(hù)。

—— 《MDN / CSS 預(yù)處理器》

一些最流行的 CSS 預(yù)處理器：

PostCSS：2013/11/04
Less：2009
SASS：2006/11/28
Stylus：2010/12/29

圖中看到 PostCSS 的下載量一直遙遙領(lǐng)先其他 CSS 預(yù)處理器，PostCSS 比較大的優(yōu)勢在于社區(qū)有很多插件可以使用，相當(dāng)于 CSS 屆的 Babel，常見 PostCSS 插件如下：

Autopre?xer：自動補(bǔ)全瀏覽器私有前綴
precss：CSS 預(yù)處理(整合 Sass、LESS 或 Stylus 功能，語法基本和 Sass 的相同)
postcss-import：通過 @import，整合多個 CSS 文件
css-mqpacker：將相同的 CSS 媒體查詢規(guī)則合并為一個
cssnano：壓縮 CSS 文件
postcss-color-rgba-fallback：給 rgba 顏色創(chuàng)建降級方案(添加備用顏色)
postcss-opacity：給 opacity 提供降級方案(給 IE 瀏覽器添加濾鏡屬性)
node-pixrem：讓 IE8 ?持 rem 單位
postcss-pseudoelements：將偽元素的 :: 轉(zhuǎn)換為 : ( IE8 不不?支持 ::)

如果一定需要使用 CSS 預(yù)處理器，可能 PostCSS 是最好的選擇之一，當(dāng)然，也是需要看實(shí)際你項(xiàng)目的整體方案來選擇。

8 CSS-in-JS VS CSS Preprocessor

在 Google Trends 中我們可以看到 2014 年后 CSS-in-JS 的趨勢就逐漸超越了 CSS 預(yù)處理器，這在一方面也說明了開發(fā)人員在 CSS-in-JS 上有著很大興趣。

二 CSS-in-JS 的介紹

CSS-in-JS是一種樣式化技術(shù)，其中 JavaScript 用于樣式化組件。解析此 JavaScript 時(shí)，將生成 CSS（通常作為