使用 JS 來動態操作 css，你知道幾種方法？

avaScript 可以說是交互之王，它作為腳本語言加上許多 Web Api 進一步擴展了它的特性集，更加豐富界面交互的可操作性。這類 API 的例子包括WebGL API、Canvas API、DOM API，還有一組不太為人所知的 CSS API。

由于JSX和無數JS框架的出現，使通過JS API與DOM交互的想法真正流行起來，但是在 CSS 中使用類似技術似乎并沒有很多。當然，存在像CSS-in-JS這類解決方案，但是最流行的解決方案還是基于轉譯(transpilation)，無需額外運行即可生成 CSS。這肯定對性能有好處，因為CSS API的使用可能導致額外的重繪，這與DOM API的使用一樣。但這不是咱們想要的。如果哪天公司要求咱們，既要操縱 DOM 元素的樣式和 CSS 類，還要像使用 HTML 一樣使用 JS 創建完整的樣式表，該怎么辦？

內聯樣式

在咱們深入一些復雜的知識之前，先回來顧一下一些基礎知識。例如，咱們可以通過修改它的.style屬性來編輯給定的HTMLElement的內聯樣式。

const el=document.createElement('div')

el.style.backgroundColor='red'
// 或者 
el.style.cssText='background-color: red'
// 或者
el.setAttribute('style', 'background-color: red')

直接在.style對象上設置樣式屬性將需要使用駝峰式命名作為屬性鍵，而不是使用短橫線命名。如果咱們需要設置更多的內聯樣式屬性，則可以通過設置.style.cssText屬性，以更加高效的方式進行設置。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

請記住，給cssText設置后原先的css樣式被清掉了，因此，要求咱們一次死一堆樣式。

如果這種設置內聯樣式過于繁瑣，咱們還可以考慮將.style與Object.assign()一起使用，以一次設置多個樣式屬性。

// ...
Object.assign(el.style, {
 backgroundColor: "red",
 margin: "25px"
})

這些“基本知識”比咱們想象的要多得多。.style對象實現CSSStyleDeclaration接口。這說明它帶還有一些有趣的屬性和方法，這包括剛剛使用的.cssText，還包括.length（設置屬性的數量），以及.item()、.getPropertyValue()和.setPropertyValue()之類的方法：

// ...
const propertiesCount=el.style.length
for(let i=0; i < propertiesCount; i++) {
 const name=el.style.item(i) // 'background-color'
 const value=el.style.getPropertyValue(name) // 're'
 const priority=el.style.getPropertyPriority(name) // 'important'

 if(priority==='important') {
 el.style.removeProperty()
 }
}

這里有個小竅門-在遍歷過程中.item()方法具有按索引訪問形式的備用語法。

// ...
el.style.item(0)===el.style[0]; // true

CSS 類

接著，來看看更高級的結構——CSS類，它在檢索和設置時具有字符串形式是.classname。

// ...
el.className="class-one class-two";
el.setAttribute("class", "class-one class-two");

設置類字符串的另一種方法是設置class屬性（與檢索相同）。但是，就像使用.style.cssText屬性一樣，設置.className將要求咱們在字符串中包括給定元素的所有類，包括已更改和未更改的類。

當然，可以使用一些簡單的字符串操作來完成這項工作，還有一種就是使用較新的.classList屬性，這個屬性，IE9 不支持它，而 IE10 和 IE11 僅部分支持它。

classlist屬性實現了DOMTokenList，有一大堆有用的方法。例如.add()、.remove()、.toggle()和.replace()允許咱們更改當前的 CSS 類集合，而其他的，例如.item()、.entries()或.foreach()則可以簡化這個索引集合的遍歷過程。

// ...
const classNames=["class-one", "class-two", "class-three"];
classNames.forEach(className=> {
 if(!el.classList.contains(className)) {
 el.classList.add(className);
 }
});

Stylesheets

一直以來，Web Api 還有一個StyleSheetList接口，該接口由document.styleSheets屬性實現。document.styleSheets 只讀屬性，返回一個由 StyleSheet 對象組成的 StyleSheetList，每個 StyleSheet 對象都是一個文檔中鏈接或嵌入的樣式表。

for(styleSheet of document.styleSheets){
 console.log(styleSheet);
}

通過打印結果咱們可以知道，每次循環打印的是 CSSStyleSheet 對象，每個 CSSStyleSheet 對象由下列屬性組成：

屬性描述media獲取當前樣式作用的媒體。disabled打開或禁用一張樣式表。href返回 CSSStyleSheet 對象連接的樣式表地址。title返回 CSSStyleSheet 對象的title值。type返回 CSSStyleSheet 對象的type值，通常是text/css。parentStyleSheet返回包含了當前樣式表的那張樣式表。ownerNode返回CSSStyleSheet對象所在的DOM節點，通常是<link>或<style>。cssRules返回樣式表中所有的規則。ownerRule如果是通過@import導入的，屬性就是指向表示導入的規則的指針，否則值為null。IE不支持這個屬性。

** CSSStyleSheet對象方法: **

方法描述insertRule()在當前樣式表的 cssRules 對象插入CSS規則。deleteRule()在當前樣式表刪除 cssRules 對象的CSS規則。

有了StyleSheetList的全部內容，咱們來CSSStyleSheet本身。在這里就有點意思了， CSSStyleSheet擴展了StyleSheet接口，并且只有這種只讀屬性，如.ownerNode，.href，.title或.type，它們大多直接從聲明給定樣式表的地方獲取。回想一下加載外部CSS文件的標準HTML代碼，咱們就會明白這句話是啥意思：

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="Styles">
</head>

現在，咱們知道HTML文檔可以包含多個樣式表，所有這些樣式表都可以包含不同的規則，甚至可以包含更多的樣式表(當使用@import時)。CSSStyleSheet有兩個方法:、.insertrule()和.deleterule() 來增加和刪除 Css 規則。

// ...
const ruleIndex=styleSheet.insertRule("div {background-color: red}");
styleSheet.deleteRule(ruleIndex);

.insertRule(rule,index):此函數可以在cssRules規則集合中插入一個指定的規則，參數rule是標示規則的字符串，參數index是值規則字符串插入的位置。

deleteRule(index):此函數可以刪除指定索引的規規則，參數index規定規則的索引。

CSSStyleSheet也有自己的兩個屬性：.ownerRule和.cssRule。雖然.ownerRule與@import相關，但比較有趣的是.cssRules。簡單地說，它是CSSRuleList的CSSRule，可以使用前面提到的.insertrule()和.deleterule()方法修改它。請記住，有些瀏覽器可能會阻止咱們從不同的來源(域)訪問外部CSSStyleSheet的.cssRules屬性。

那么什么是 CSSRuleList？

CSSRuleList是一個數組對象包含著一個有序的CSSRule對象的集合。每一個CSSRule可以通過rules.item(index)的形式訪問, 或者rules[index]。這里的rules是一個實現了CSSRuleList接口的對象， index是一個基于0開始的，順序與CSS樣式表中的順序是一致的。樣式對象的個數是通過rules.length表達。

對于CSSStyleRule對象:

每一個樣式表CSSStyleSheet對象可以包含若干CSSStyleRule對象，也就是css樣式規則，如下:

<style type="text/css">
 h1{color:red}
 div{color:green}
</style>

在上面的代碼中style標簽是一個CSSStyleSheet樣式表對象，這個樣式表對象包含兩個CSSStyleRule對象，也就是兩個css樣式規則。

CSSStyleRule對象具有下列屬性:

1.type:返回0-6的數字，表示規則的類型，類型列表如下:

0：CSSRule.UNKNOWN_RULE。

1：CSSRule.STYLE_RULE （定義一個CSSStyleRule對象）。

2：CSSRule.CHARSET_RULE （定義一個CSSCharsetRule對象，用于設定當前樣式表的字符集，默認與當前網頁相同）。

3：CSSRule.IMPORT_RULE （定義一個CSSImportRule對象，就是用@import引入其他的樣式表）

4：CSSRule.MEDIA_RULE （定義一個CSSMediaRule對象，用于設定此樣式是用于顯示器，打印機還是投影機等等）。

5：CSSRule.FONT_FACE_RULE （定義一個CSSFontFaceRule對象，CSS3的@font-face）。

6：CSSRule.PAGE_RULE （定義一個CSSPageRule對象）。

2.cssText:返回一個字符串，表示的是當前規則的內容，例如:

div{color:green}

3.parentStyleSheet:返回所在的CSSStyleRule對象。

4.parentRule:如果規則位于另一規則中，該屬性引用另一個CSSRule對象。

5.selectorText:返回此規則的選擇器，如上面的div就是選擇器。

6.style:返回一個CSSStyleDeclaration對象。

// ...
const ruleIndex=styleSheet.insertRule("div {background-color: red}");
const rule=styleSheet.cssRules.item(ruleIndex);

rule.selectorText; // "div"
rule.style.backgroundColor; // "red"

實現

現在，咱們對 CSS 相關的 JS Api有了足夠的了解，可以創建咱們自己的、小型的、基于運行時的CSS-in-JS實現。咱們的想法是創建一個函數，它傳遞一個簡單的樣式配置對象，生成一個新創建的CSS類的哈希名稱供以后使用。

實現流程很簡單，咱們需要一個能夠訪問某種樣式表的函數，并且只需使用.insertrule()方法和樣式配置就可以運行了。先從樣式表部分開始：

function createClassName(style) {
 // ...
 let styleSheet;
 for (let i=0; i < document.styleSheets.length; i++) {
 if (document.styleSheets[i].CSSInJS) {
 styleSheet=document.styleSheets[i];
 break;
 }
 }
 if (!styleSheet) {
 const style=document.createElement("style");
 document.head.appendChild(style);
 styleSheet=style.sheet;
 styleSheet.CSSInJS=true;
 }
 // ...
}

如果你使用的是ESM或任何其他類型的JS模塊系統，則可以在函數外部安全地創建樣式表實例，而不必擔心其他人對其進行訪問。但是，為了演示例，咱們將stylesheet上的.CSSInJS屬性設置為標志的形式，通過標志來判斷是否要使用它。

現在，如果如果還需要創建一個新的樣式表怎么辦？最好的選擇是創建一個新的<style/>標記，并將其附加到HTML文檔的<head/>上。這會自動將新樣式表添加到document.styleSheets列表，并允許咱們通過<style/>標記的.sheet屬性對其進行訪問，是不是很機智？

function createRandomName() {
 const code=Math.random().toString(36).substring(7);
 return `css-${code}`;
}

function phraseStyle(style) {
 const keys=Object.keys(style);
 const keyValue=keys.map(key=> {
 const kebabCaseKey=key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 const value=`${style[key]}${typeof style[key]==="number" ? "px" : ""}`;

 return `${kebabCaseKey}:${value};`;
 });

 return `{${keyValue.join("")}}`;
}

除了上面的小竅門之外。自然，咱們首先需要一種為CSS類生成新的隨機名稱的方法。然后，將樣式對象正確地表達為可行的CSS字符串的形式。這包括駝峰命名和短橫線全名之間的轉換，以及可選的像素單位（px）轉換的處理。

function createClassName(style) {
 const className=createRandomName();
 let styleSheet;
 // ...
 styleSheet.insertRule(`.${className}${phraseStyle(style)}`);
 return className;
}

完整代碼如下：

HTML

<div id="el"></div>

function createRandomName() {
 const code=Math.random().toString(36).substring(7);
 return `css-${code}`;
}

function phraseStyle(style) {
 const keys=Object.keys(style);
 const keyValue=keys.map(key=> {
 const kebabCaseKey=key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 const value=`${style[key]}${typeof style[key]==="number" ? "px" : ""}`;
 return `${kebabCaseKey}:${value};`;
 });
 return `{${keyValue.join("")}}`;
}

function createClassName(style) {
 const className=createRandomName();
 let styleSheet;
 for (let i=0; i < document.styleSheets.length; i++) {
 if (document.styleSheets[i].CSSInJS) {
 styleSheet=document.styleSheets[i];
 break;
 }
 }
 if (!styleSheet) {
 const style=document.createElement("style");
 document.head.appendChild(style);
 styleSheet=style.sheet;
 styleSheet.CSSInJS=true;
 }
 styleSheet.insertRule(`.${className}${phraseStyle(style)}`);
 return className;
}

const el=document.getElementById("el");

const redRect=createClassName({
 width: 100,
 height: 100,
 backgroundColor: "red"
});

el.classList.add(redRect);

運行效果：

總結

正如本文咱們所看到的，使用 JS 操作CSS 是一件非常有趣的事，咱們可以挖掘很多好用的 API,上面的例子只是冰山一角，在CSS API(或者更確切地說是API)中還有更多方法，它們正等著被揭開神秘面紗。

原文：https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/

家好，我是皮湯。最近業務調整，組內開啟了前端工程化方面的基建，我主要負責 CSS 技術選型這一塊，針對目前業界主流的幾套方案進行了比較完善的調研與比較，分享給大家。

目前整個 CSS 工具鏈、工程化領域的主要方案如下：

而我們技術選型的標準如下：

- 開發速度快

- 開發體驗友好

- 調試體驗友好

- 可維護性友好

- 擴展性友好

- 可協作性友好

- 體積小

- 有最佳實踐指導

目前主要需要對比的三套方案：

- Less/Sass + PostCSS 的純 CSS c側方案

- styled-components / emotion 的純 CSS-in-JS 側方案

- TailwindCSS 的以寫輔助類為主的 HTML 側方案

## 純 CSS 側方案

### 介紹與優點

> 維護狀態：一般

> Star 數：16.7K

> 支持框架：無框架限制

> 項目地址：https://github.com/less/less.js

Less/Sass + PostCSS 這種方案在目前主流的組件庫和企業級項目中使用很廣，如 ant-design 等

它們的主要作用如下：

- 為 CSS 添加了類似 JS 的特性，你也可以使用變量、mixin，寫判斷等

- 引入了模塊化的概念，可以在一個 less 文件中導入另外一個 less 文件進行使用

- 兼容標準，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等

這類工具能夠與主流的工程化工具一起使用，如 Webpack，提供對應的 loader 如 sass-loader，然后就可以在 React/Vue 項目中建 `.scss` 文件，寫 sass 語法，并導入到 React 組件中生效。

比如我寫一個組件在響應式各個斷點下的展示情況的 sass 代碼：

```

.component {

width: 300px;

@media (min-width: 768px) {

width: 600px;

@media (min-resolution: 192dpi) {

background-image: url(/img/retina2x.png);

}

@media (min-width: 1280px) {

width: 800px;

}

```

或導入一些用于標準化瀏覽器差異的代碼：

```

@import "normalize.css";

// component 相關的其他代碼

```

### 不足

這類方案的一個主要問題就是，只是對 CSS 本身進行了增強，但是在幫助開發者如何寫更好的 CSS、更高效、可維護的 CSS 方面并沒有提供任何建議。

- 你依然需要自己定義 CSS 類、id，并且思考如何去用這些類、id 進行組合去描述 HTML 的樣式

- 你依然可能會寫很多冗余的 Less/Sass 代碼，然后造成項目的負擔，在可維護性方面也有巨大問題

### 優化

- 可以引入 CSS 設計規范：BEM 規范，來輔助用戶在整個網頁的 HTML 骨架以及對應的類上進行設計

- 可以引入 CSS Modules，將 CSS 文件進行 “作用域” 限制，確保在之后維護時，修改一個內容不會引起全局中其他樣式的效果

#### BEM 規范

B （Block）、E（Element）、M（Modifier），具體就是通過塊、元素、行為來定義所有的可視化功能。

拿設計一個 Button 為例：

```

/* Block */

.btn {}

/* 依賴于 Block 的 Element */

.btn__price {}

/* 修改 Block 風格的 Modifier */

.btn--orange {}

.btn--big {}

```

遵循上述規范的一個真實的 Button：

```

<span class="btn__text">BIG BUTTON</span>

</a>

```

可以獲得如下的效果：

#### CSS Modules

CSS Modules 主要為 CSS 添加局部作用域和模塊依賴，使得 CSS 也能具有組件化。

一個例子如下：

```

import React from 'react';

import style from './App.css';

export default ()=> {

return (

Hello World

</h1>

);

};

```

.title {

composes: className;

color: red;

}

```

上述經過編譯會變成如下 hash 字符串：

```

Hello World

</h1>

```

._3zyde4l1yATCOkgn-DBWEL {

color: red;

}

```

CSS Modules 可以與普通 CSS、Less、Sass 等結合使用。

## 純 JS 側方案

### 介紹與優點

> 維護狀態：一般

> Star 數：35.2K

> 支持框架：React ，通過社區支持 Vue 等框架

> 項目地址：https://github.com/styled-components/styled-components

使用 JS 的模板字符串函數，在 JS 里面寫 CSS 代碼，這帶來了兩個認知的改變：

- 不是在根據 HTML，然后去寫 CSS，而是站在組件設計的角度，為組件寫 CSS，然后應用組件的組合思想搭建大應用

- 自動提供類似 CSS Modules 的體驗，不用擔心樣式的全局污染問題

同時帶來了很多 JS 側才有的各種功能特性，可以讓開發者用開發 JS 的方式開發 CSS，如編輯器自動補全、Lint、編譯壓縮等。

比如我寫一個按鈕：

```

const Button=styled.button`

/* Adapt the colors based on primary prop */

background: ${props=> props.primary ? "palevioletred" : "white"};

color: ${props=> props.primary ? "white" : "palevioletred"};

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

render(

<div>

<Button>Normal</Button>

<Button primary>Primary</Button>

</div>

);

```

可以獲得如下效果：

還可以擴展樣式：

```

// The Button from the last section without the interpolations

const Button=styled.button`

color: palevioletred;

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

// A new component based on Button, but with some override styles

const TomatoButton=styled(Button)`

color: tomato;

border-color: tomato;

render(

<div>

<Button>Normal Button</Button>

<TomatoButton>Tomato Button</TomatoButton>

</div>

);

```

可以獲得如下效果：

### 不足

雖然這類方案提供了在 JS 中寫 CSS，充分利用 JS 的插值、組合等特性，然后應用 React 組件等組合思想，將組件與 CSS 進行細粒度綁定，讓 CSS 跟隨著組件一同進行組件化開發，同時提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復用 JS 社區的最佳實踐等。

但是它仍然有一些不足：

- 仍然是是對 CSS 增強，提供非常大的靈活性，開發者仍然需要考慮如何去組織自己的 CSS

- 沒有給出一套 “有觀點” 的最佳實踐做法

- 在上層也缺乏基于 styled-components 進行復用的物料庫可進行參考設計和使用，導致在初始化使用時開發速度較低

- 在 JS 中寫 CSS，勢必帶來一些本屬于 JS 的限制，如 TS 下，需要對 Styled 的組件進行類型注釋

- 官方維護的內容只兼容 React 框架，Vue 和其他框架都由社區提供支持

整體來說不太符合團隊協作使用，需要人為總結最佳實踐和規范等。

### 優化

- 尋求一套寫 CSS 的最佳實踐和團隊協作規范

- 能夠擁有大量的物料庫或輔助類等，提高開發效率，快速完成應用開發

## 偏向 HTML 側方案

### 介紹與優點

> 維護狀態：積極

> Star 數：48.9K

> 支持框架：React、Vue、Svelte 等主流框架

> 項目地址：https://github.com/tailwindlabs/tailwindcss

典型的是 TailwindCSS，一個輔助類優先的 CSS 框架，提供如 `flex` 、`pt-4` 、`text-center` 、`rotate-90` 這樣實用的類名，然后基于這些底層的輔助類向上組合構建任何網站，而且只需要專注于為 HTML 設置類名即可。

一個比較形象的例子可以參考如下代碼：

```

<button class="btn btn--secondary">Decline</button>

<button class="btn btn--primary">Accept</button>

```

上述代碼應用 BEM 風格的類名設計，然后設計兩個按鈕，而這兩個類名類似主流組件庫里面的 Button 的不同狀態的設計，而這兩個類又是由更加基礎的 TailwindCSS 輔助類組成：

```

.btn {

@apply text-base font-medium rounded-lg p-3;

}

.btn--primary {

@apply bg-rose-500 text-white;

}

.btn--secondary {

@apply bg-gray-100 text-black;

}

```

上面的輔助類包含以下幾類：

- 設置文本相關： `text-base` 、`font-medium` 、`text-white` 、`text-black`

- 設置背景相關的：`bg-rose-500` 、`bg-gray-100`

- 設置間距相關的：`p-3`

- 設置邊角相關的：`rounded-lg`

通過 Tailwind 提供的 `@apply` 方法來對這些輔助類進行組合構建更上層的樣式類。

上述的最終效果展示如下：

可以看到 TailwindCSS 將我們開發網站的過程抽象成為使用 Figma 等設計軟件設計界面的過程，同時提供了一套用于設計的規范，相當于內置最佳實踐，如顏色、陰影、字體相關的內容，一個很形象的圖片可以說明這一點：

TailwindCSS 為我們規劃了一個元素可以設置的屬性，并且為每個屬性給定了一組可以設置的值，這些屬性+屬性值組合成一個有機的設計系統，非常便于團隊協作與共識，讓我們開發網站就像做設計一樣簡單、快速，但是整體風格又能保持一致。

TailwindCSS 同時也能與主流組件庫如 React、Vue、Svelte 結合，融入基于組件的 CSS 設計思想，但又只需要修改 HTML 上的類名，如我們設計一個食譜組件：

```

// Recipes.js

import Nav from './Nav.js'

import NavItem from './NavItem.js'

import List from './List.js'

import ListItem from './ListItem.js'

export default function Recipes({ recipes }) {

return (

<Nav>

<NavItem href="/featured" isActive>Featured</NavItem>

<NavItem href="/popular">Popular</NavItem>

<NavItem href="/recent">Recent</NavItem>

</Nav>

<List>

{recipes.map((recipe)=> (

))}

</List>

</div>

)

}

// Nav.js

export default function Nav({ children }) {

return (

{children}

</ul>

</nav>

)

}

// NavItem.js

export default function NavItem({ href, isActive, children }) {

return (

<li>

href={href}

className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`}

{children}

</a>

</li>

)

}

// List.js

export default function List({ children }) {

return (

{children}

</ul>

)

}

//ListItem.js

export default function ListItem({ recipe }) {

return (

{recipe.title}

</h2>

<div>

<dd>

<abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr>

</dd>

</div>

<div>

<dt className="sr-only">Difficulty</dt>

<dd> · {recipe.difficulty}</dd>

</div>

<div>

<dt className="sr-only">Servings</dt>

<dd> · {recipe.servings} servings</dd>

</div>

<dt className="inline">By</dt>{' '}

<dd className="inline text-black">{recipe.author}</dd>

</div>

<span className="sr-only">Rating</span>

</svg>

</dt>

<dd>{recipe.rating}</dd>

</div>

</dl>

</div>

</article>

)

}

```

上述食譜的效果如下：

可以看到我們無需寫一行 CSS，而是在 HTML 里面應用各種輔助類，結合 React 的組件化設計，既可以輕松完成一個非常現代化且好看的食譜組件。

除了上面的特性，TailwindCSS 在響應式、新特性支持、Dark Mode、自定義配置、自定義新的輔助類、IDE 方面也提供非常優秀的支持，除此之外還有基于 TailwindCSS 構建的物料庫 Tailwind UI ，提供各種各樣成熟、好看、可用于生產的物料庫：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1cb983da6f71470b91ac764d14907998~tplv-k3u1fbpfcp-zoom-1.image)

因為需要自定的 CSS 不多，而需要自定義的 CSS 可以定義為可復用的輔助類，所以在可維護性方面也是極好的。

### 不足

- 因為要引入一個額外的運行時，TailwindCSS 輔助類到 CSS 的編譯過程，而隨著組件越來越多，需要編譯的工作量也會變大，所以速度會有影響

- 過于底層，相當于給了用于設計的最基礎的指標，但是如果我們想要快速設計網站，那么可能還需要一致的、更加上層的組件庫

- 相當于引入了一套框架，具有一定的學習成本和使用成本

### 優化

- Tailwind 2.0 支持 [JIT](https://blog.tailwindcss.com/tailwindcss-2-1 "JIT")，可以大大提升編譯速度，可以考慮引入

- 基于 TailwindCSS，設計一套符合自身風格的上層組件庫、物料庫，便于更加快速開發

- 提前探索、學習和總結一套教程與開發最佳實踐

- 探索 styled-components 等結合 TailwindCSS 的開發方式

## 參考鏈接

- [CSS 工程化發展歷程](https://bytedance.feishu.cn/docs/doccnTRF0OZtJMgKuo3y0hIDMbc# "CSS 工程化發展歷程")

/ 感謝支持/

以上便是本次分享的全部內容，希望對你有所幫助^_^

喜歡的話別忘了分享、點贊、收藏三連哦~

歡迎關注公眾號 程序員巴士，來自字節、蝦皮、招銀的三端兄弟，分享編程經驗、技術干貨與職業規劃，助你少走彎路進大廠。

以安裝Minify 插件，Minify 插件可以壓縮js、css和html代碼。會在指定壓縮的文件同目錄下生成{filename}.min.[css|js|html]文件，并且可以設置在文件保存時自動重新壓縮。

插件安裝

打開VSCode,按照如下所示安裝插件

使用方法

打開要壓縮的文件，按F1，然后輸入mini搜索找到對應的命令來執行壓縮

點擊 Minify 命令,會在當前文件同目錄下生成 {filename}.min.{extension} 文件,該文件中就是壓縮后的內容。

設置文件保存時自動重新壓縮

進入插件詳情頁面，點擊設置

勾選 Minify: Minify Existing On Save 選項

在線咨詢

上一篇：手擼的一個快遞查詢系統，竟然閱讀量過1.8w
下一篇：STL使用范例：網頁模板文本按特殊標記批量處理

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用 JS 來動態操作 css，你知道幾種方法？

/ 感謝支持/

插件安裝

使用方法

設置文件保存時自動重新壓縮

您的項目需求