還在用 JS 寫頁面？教你只用純 HTML 做出幾個(gè)實(shí)用網(wǎng)頁效果

我們以往看到的頁面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我將介紹如何使用純HTML打造屬于自己的實(shí)用效果。

1. 折疊手風(fēng)琴

使用Details和Summary標(biāo)簽可以創(chuàng)建沒有JavaScript代碼的可折疊手風(fēng)琴。

效果：

HTML

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>

<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

CSS

* {
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
details {
 border: 1px solid #aaa;
 border-radius: 4px;
 padding: .5em .5em 0;
}
summary {
 font-weight: bold;
 margin: -.5em -.5em 0;
 padding: .5em;
}
details[open] {
 padding: .5em;
}
details[open] summary {
 border-bottom: 1px solid #aaa;
 margin-bottom: .5em;
}

瀏覽器支持：

2. 進(jìn)度條

該Meter和Progress 的元素標(biāo)簽的基礎(chǔ)上，你可以調(diào)整屬性呈現(xiàn)在屏幕上的進(jìn)度條。進(jìn)步有兩個(gè)屬性：max和value校準(zhǔn)進(jìn)度條，而Meter標(biāo)簽提供了更多的定制屬性。

效果：

HTML:

<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
 min="0" max="100"
 low="33" high="66" optimum="80"
 value="50">
 at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>

CSS:

body {
 margin: 50px;
}
label {
 padding-right: 10px;
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

瀏覽器支持：

3. 更多輸入類型

在定義輸入元素時(shí)，您要知道現(xiàn)代瀏覽器已經(jīng)允許您指定足夠多的輸入類型了。除了你應(yīng)該已經(jīng)知道text，email，password，number這些類型外，還有下面的這些。

date 將顯示本機(jī)日期選擇器
datetime-local 更豐富的日期和時(shí)間選擇器
month 友好的月份選擇器
tel會讓你輸入一個(gè)電話號碼。在移動瀏覽器上打開它，彈出的鍵盤將發(fā)生變化，同樣的email也是如此。
search 將輸入文本框設(shè)置為友好的搜索樣式。

效果：

HTML:

<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">

CSS:

input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}

各種新輸入類型的MDN文檔非常廣泛且信息量很大。此外，檢查移動輸入類型以了解用戶在移動瀏覽器上時(shí)這些輸入元素的鍵盤行為。

4. 視頻和音頻

video和audio元素雖然現(xiàn)在已經(jīng)成為HTML規(guī)范的一部分，但是你一樣會驚訝于你可以使用video標(biāo)簽在屏幕上渲染出一個(gè)體面的視頻播放器。

<video controls>
 <source src="https://addpipe.com/sample_vid/short.mp4" 
 poster="https://addpipe.com/sample_vid/poster.png">
 Sorry, your browser doesn't support embedded videos.
</video

視頻標(biāo)記中值得注意的一些屬性包括：

poster 下載視頻時(shí)要顯示封面的URL
preload 是否在頁面加載時(shí)預(yù)加載整個(gè)視頻
autoplay 視頻是否應(yīng)該在頁面加載后自動播放

瀏覽器支持：

5. 校對文本

當(dāng)你想顯示歷史編輯及校對的情況時(shí)，blockquote，del和ins元素標(biāo)簽可以派上用場了。

示例：

HTML：

<blockquote>
 There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

CSS：

del {
 text-decoration: line-through;
 background-color: #fbb;
 color: #555;
}
ins {
 text-decoration: none;
 background-color: #d4fcbc;
}
blockquote {
 padding-left: 15px;
 line-height: 30px;
 border-left: 3px solid #d7d7db;
 font-size: 1rem;
 background: #eee;
 width: 200px;
}

6.更統(tǒng)一的引號

由于中英文引號的不同，使用<q>標(biāo)記可以讓您很好的解決這個(gè)問題，它可使你的內(nèi)容在大多數(shù)瀏覽器上更一致地呈現(xiàn)引號。

HTML：

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>

CSS：

body {
 margin: 50px;
}
q {
 font-style: italic;
 color: #000000bf;
}

7. 鍵盤標(biāo)簽

<kbd>標(biāo)簽應(yīng)該是一個(gè)少為人知的冷門標(biāo)簽，但這個(gè)能使用更好的方式來說明組合鍵的樣式。

HTML：

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>

CSS：

body {
 margin: 50px;
}
kbd {
 display: inline-block;
 margin: 0 .1em;
 padding: .1em .6em;
 font-size: 11px;
 line-height: 1.4;
 color: #242729;
 text-shadow: 0 1px 0 #FFF;
 background-color: #e1e3e5;
 border: 1px solid #adb3b9;
 border-radius: 3px;
 box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 white-space: nowrap;
}

8.使用HTML共享代碼

使用figcaption pre code標(biāo)簽，您可以使用純HTML和CSS呈現(xiàn)出不錯(cuò)的代碼片段。

HTML：

<figure>
 <figcaption>
 Defining a css <code>color</code> property for a class called 'golden'
 </figcaption>
 
 <pre>
 <code>
 .golden {
 color: golden;
 }
 </code>
 </pre>
</figure>

CSS：

pre {
 background-color: #ffbdbd;
}

這篇文章也只是拋磚引玉，也許您也有更多私藏的使用技巧，不妨也貼出來分享給大家。

另外，如果您不僅僅限于以上的效率，希望有更完整的動態(tài)功能。

例如：您希望在您的頁面中加入Excel功能，可以嘗試葡萄城的 純前端表格控件SpreadJS，再或者您希望為用戶提供更完備、更高效的前端UI控件，您也不妨可以試試 WijmoJS，相信它們都能為您的應(yīng)用增色不少。

關(guān)于葡萄城
賦能開發(fā)者！葡萄城公司成立于 1980 年，是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國的分支機(jī)構(gòu)，面向全球市場提供軟件研發(fā)服務(wù)，并為中國企業(yè)的信息化提供國際先進(jìn)的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國內(nèi)外屢獲殊榮，在全球被數(shù)十萬家企業(yè)、學(xué)校和政府機(jī)構(gòu)廣泛應(yīng)用。

1）定義n初始值0,

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>

（2）定義自加按鈕，展示n的值，和判斷結(jié)果

<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>

1、v-show

<h1 style="color: red">使用v-show進(jìn)行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進(jìn)行條件渲染</h3>

2、v-if

<h1 style="color: red">使用v-if進(jìn)行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進(jìn)行條件渲染</h3>

3、v-if v-else-if v-else

<h1 style="color: red">使用if else-if else進(jìn)行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進(jìn)行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進(jìn)行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進(jìn)行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進(jìn)行條件渲染 if else-if - v-else</h3>

4、template

<h1 style="color: red">使用template v-if進(jìn)行條件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
</template>

執(zhí)行結(jié)果

筆記分享

<pre v-show="true">
    條件渲染：
    1、v-if
        寫法：
            （1）v-if = "表達(dá)式"
            （2）v-else-if = "表達(dá)式"
            （3）v-else = "表達(dá)式"
        適用于：切換頻率較低的場景
        特點(diǎn)：不展示的DOM元素將被直接刪除
        注意：v-if和v-else-if、v-else一起使用的時(shí)候，要求結(jié)構(gòu)不可以被打斷
    2、v-show
        寫法：v-show = "表達(dá)式"
        適用于：切換頻率較高的場景
        特點(diǎn)：不展示的DOM元素未被移除，使用樣式進(jìn)行隱藏
    3、備注
        使用v-if時(shí)，元素可能無法獲取到，使用v-show是可獲取到的
    4、使用template v-if
        寫的時(shí)候template對內(nèi)容進(jìn)行了包裹，
        等最終頁面渲染的時(shí)候，將把template標(biāo)簽刪掉，
        這也就是說不破壞原來的樣式。
        但是template只能配合v-if進(jìn)行使用。
</pre>

源碼截圖

家好，我是皮湯。最近業(yè)務(wù)調(diào)整，組內(nèi)開啟了前端工程化方面的基建，我主要負(fù)責(zé) CSS 技術(shù)選型這一塊，針對目前業(yè)界主流的幾套方案進(jìn)行了比較完善的調(diào)研與比較，分享給大家。

目前整個(gè) CSS 工具鏈、工程化領(lǐng)域的主要方案如下：

而我們技術(shù)選型的標(biāo)準(zhǔn)如下：

- 開發(fā)速度快

- 開發(fā)體驗(yàn)友好

- 調(diào)試體驗(yàn)友好

- 可維護(hù)性友好

- 擴(kuò)展性友好

- 可協(xié)作性友好

- 體積小

- 有最佳實(shí)踐指導(dǎo)

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

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

- styled-components / emotion 的純 CSS-in-JS 側(cè)方案

- TailwindCSS 的以寫輔助類為主的 HTML 側(cè)方案

## 純 CSS 側(cè)方案

### 介紹與優(yōu)點(diǎn)

> 維護(hù)狀態(tài)：一般

> Star 數(shù)：16.7K

> 支持框架：無框架限制

> 項(xiàng)目地址：https://github.com/less/less.js

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

它們的主要作用如下：

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

- 引入了模塊化的概念，可以在一個(gè) less 文件中導(dǎo)入另外一個(gè) less 文件進(jìn)行使用

- 兼容標(biāo)準(zhǔn)，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等

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

比如我寫一個(gè)組件在響應(yīng)式各個(gè)斷點(diǎn)下的展示情況的 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;

}

```

或?qū)胍恍┯糜跇?biāo)準(zhǔn)化瀏覽器差異的代碼：

```

@import "normalize.css";

// component 相關(guān)的其他代碼

```

### 不足

這類方案的一個(gè)主要問題就是，只是對 CSS 本身進(jìn)行了增強(qiáng)，但是在幫助開發(fā)者如何寫更好的 CSS、更高效、可維護(hù)的 CSS 方面并沒有提供任何建議。

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

- 你依然可能會寫很多冗余的 Less/Sass 代碼，然后造成項(xiàng)目的負(fù)擔(dān)，在可維護(hù)性方面也有巨大問題

### 優(yōu)化

- 可以引入 CSS 設(shè)計(jì)規(guī)范：BEM 規(guī)范，來輔助用戶在整個(gè)網(wǎng)頁的 HTML 骨架以及對應(yīng)的類上進(jìn)行設(shè)計(jì)

- 可以引入 CSS Modules，將 CSS 文件進(jìn)行 “作用域” 限制，確保在之后維護(hù)時(shí)，修改一個(gè)內(nèi)容不會引起全局中其他樣式的效果

#### BEM 規(guī)范

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

拿設(shè)計(jì)一個(gè) Button 為例：

```

/* Block */

.btn {}

/* 依賴于 Block 的 Element */

.btn__price {}

/* 修改 Block 風(fēng)格的 Modifier */

.btn--orange {}

.btn--big {}

```

遵循上述規(guī)范的一個(gè)真實(shí)的 Button：

```

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

</a>

```

可以獲得如下的效果：

#### CSS Modules

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

一個(gè)例子如下：

```

import React from 'react';

import style from './App.css';

export default () => {

return (

Hello World

</h1>

);

};

```

.title {

composes: className;

color: red;

}

```

上述經(jīng)過編譯會變成如下 hash 字符串：

```

Hello World

</h1>

```

._3zyde4l1yATCOkgn-DBWEL {

color: red;

}

```

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

## 純 JS 側(cè)方案

### 介紹與優(yōu)點(diǎn)

> 維護(hù)狀態(tài)：一般

> Star 數(shù)：35.2K

> 支持框架：React ，通過社區(qū)支持 Vue 等框架

> 項(xiàng)目地址：https://github.com/styled-components/styled-components

使用 JS 的模板字符串函數(shù)，在 JS 里面寫 CSS 代碼，這帶來了兩個(gè)認(rèn)知的改變：

- 不是在根據(jù) HTML，然后去寫 CSS，而是站在組件設(shè)計(jì)的角度，為組件寫 CSS，然后應(yīng)用組件的組合思想搭建大應(yīng)用

- 自動提供類似 CSS Modules 的體驗(yàn)，不用擔(dān)心樣式的全局污染問題

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

比如我寫一個(gè)按鈕：

```

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>

);

```

可以獲得如下效果：

還可以擴(kuò)展樣式：

```

// 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 的插值、組合等特性，然后應(yīng)用 React 組件等組合思想，將組件與 CSS 進(jìn)行細(xì)粒度綁定，讓 CSS 跟隨著組件一同進(jìn)行組件化開發(fā)，同時(shí)提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復(fù)用 JS 社區(qū)的最佳實(shí)踐等。

但是它仍然有一些不足：

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

- 沒有給出一套 “有觀點(diǎn)” 的最佳實(shí)踐做法

- 在上層也缺乏基于 styled-components 進(jìn)行復(fù)用的物料庫可進(jìn)行參考設(shè)計(jì)和使用，導(dǎo)致在初始化使用時(shí)開發(fā)速度較低

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

- 官方維護(hù)的內(nèi)容只兼容 React 框架，Vue 和其他框架都由社區(qū)提供支持

整體來說不太符合團(tuán)隊(duì)協(xié)作使用，需要人為總結(jié)最佳實(shí)踐和規(guī)范等。

### 優(yōu)化

- 尋求一套寫 CSS 的最佳實(shí)踐和團(tuán)隊(duì)協(xié)作規(guī)范

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

## 偏向 HTML 側(cè)方案

### 介紹與優(yōu)點(diǎn)

> 維護(hù)狀態(tài)：積極

> Star 數(shù)：48.9K

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

> 項(xiàng)目地址：https://github.com/tailwindlabs/tailwindcss

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

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

```

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

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

```

上述代碼應(yīng)用 BEM 風(fēng)格的類名設(shè)計(jì)，然后設(shè)計(jì)兩個(gè)按鈕，而這兩個(gè)類名類似主流組件庫里面的 Button 的不同狀態(tài)的設(shè)計(jì)，而這兩個(gè)類又是由更加基礎(chǔ)的 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;

}

```

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

- 設(shè)置文本相關(guān)： `text-base` 、`font-medium` 、`text-white` 、`text-black`

- 設(shè)置背景相關(guān)的：`bg-rose-500` 、`bg-gray-100`

- 設(shè)置間距相關(guān)的：`p-3`

- 設(shè)置邊角相關(guān)的：`rounded-lg`

通過 Tailwind 提供的 `@apply` 方法來對這些輔助類進(jìn)行組合構(gòu)建更上層的樣式類。

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

可以看到 TailwindCSS 將我們開發(fā)網(wǎng)站的過程抽象成為使用 Figma 等設(shè)計(jì)軟件設(shè)計(jì)界面的過程，同時(shí)提供了一套用于設(shè)計(jì)的規(guī)范，相當(dāng)于內(nèi)置最佳實(shí)踐，如顏色、陰影、字體相關(guān)的內(nèi)容，一個(gè)很形象的圖片可以說明這一點(diǎn)：

TailwindCSS 為我們規(guī)劃了一個(gè)元素可以設(shè)置的屬性，并且為每個(gè)屬性給定了一組可以設(shè)置的值，這些屬性+屬性值組合成一個(gè)有機(jī)的設(shè)計(jì)系統(tǒng)，非常便于團(tuán)隊(duì)協(xié)作與共識，讓我們開發(fā)網(wǎng)站就像做設(shè)計(jì)一樣簡單、快速，但是整體風(fēng)格又能保持一致。

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

```

// 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 里面應(yīng)用各種輔助類，結(jié)合 React 的組件化設(shè)計(jì)，既可以輕松完成一個(gè)非?，F(xiàn)代化且好看的食譜組件。

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

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

因?yàn)樾枰远ǖ?CSS 不多，而需要自定義的 CSS 可以定義為可復(fù)用的輔助類，所以在可維護(hù)性方面也是極好的。

### 不足

- 因?yàn)橐胍粋€(gè)額外的運(yùn)行時(shí)，TailwindCSS 輔助類到 CSS 的編譯過程，而隨著組件越來越多，需要編譯的工作量也會變大，所以速度會有影響

- 過于底層，相當(dāng)于給了用于設(shè)計(jì)的最基礎(chǔ)的指標(biāo)，但是如果我們想要快速設(shè)計(jì)網(wǎng)站，那么可能還需要一致的、更加上層的組件庫

- 相當(dāng)于引入了一套框架，具有一定的學(xué)習(xí)成本和使用成本

### 優(yōu)化

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

- 基于 TailwindCSS，設(shè)計(jì)一套符合自身風(fēng)格的上層組件庫、物料庫，便于更加快速開發(fā)

- 提前探索、學(xué)習(xí)和總結(jié)一套教程與開發(fā)最佳實(shí)踐

- 探索 styled-components 等結(jié)合 TailwindCSS 的開發(fā)方式

## 參考鏈接

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

/ 感謝支持/

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

喜歡的話別忘了分享、點(diǎn)贊、收藏三連哦~

歡迎關(guān)注公眾號 程序員巴士，來自字節(jié)、蝦皮、招銀的三端兄弟，分享編程經(jīng)驗(yàn)、技術(shù)干貨與職業(yè)規(guī)劃，助你少走彎路進(jìn)大廠。

在線咨詢

上一篇：進(jìn)階Python郵件發(fā)送（三）-HTML郵件與附件
下一篇：XML 編輯器

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

還在用 JS 寫頁面？教你只用純 HTML 做出幾個(gè)實(shí)用網(wǎng)頁效果

1. 折疊手風(fēng)琴

2. 進(jìn)度條

3. 更多輸入類型

4. 視頻和音頻

5. 校對文本

6.更統(tǒng)一的引號

7. 鍵盤標(biāo)簽

8.使用HTML共享代碼

1、v-show

2、v-if

3、v-if v-else-if v-else

4、template

/ 感謝支持/

您的項(xiàng)目需求

1、v-show

2、v-if

4、template