2024 你還在用 CSS 框架嗎？
在如今的前端世界，曾經(jīng)非常火爆的 CSS 框架是否依然保持著昔日的輝煌？又有哪些新的 CSS 框架正在嶄露頭角，引領(lǐng)著前端開(kāi)發(fā)的潮流呢？本文將帶你一起探索目前最熱門(mén)的 CSS 框架，看看它們都有哪些優(yōu)缺點(diǎn)。
實(shí)用優(yōu)先
實(shí)用優(yōu)先的 CSS 框架旨在通過(guò)提供一系列預(yù)定義的、可組合的樣式類，使開(kāi)發(fā)者能夠以最少的自定義CSS來(lái)快速構(gòu)建現(xiàn)代和響應(yīng)式的用戶界面。這里面最具代表性的就是 Tailwind CSS 和 UnoCSS。
Tailwind CSS
Tailwind CSS 是目前最火的 CSS 框架，它強(qiáng)調(diào)的是原子級(jí)的 CSS 類，它將各種樣式定義為獨(dú)立的類，開(kāi)發(fā)者可以輕松地組合和應(yīng)用這些類來(lái)構(gòu)建出所需的樣式。這種設(shè)計(jì)理念使得Tailwind CSS能夠提供一套定義好了的class類字典，開(kāi)發(fā)者只需通過(guò)組合這些類來(lái)實(shí)現(xiàn)各種樣式的設(shè)計(jì)，而無(wú)需自己編寫(xiě)大量的CSS代碼。
Tailwind CSS 不僅內(nèi)置了豐富的CSS類，還可以在配置文件（tailwind.config.js）中自定義主題，包括顏色、字體、間距等，以適應(yīng)項(xiàng)目需求。它還提供響應(yīng)式類，自動(dòng)調(diào)整樣式以適應(yīng)不同屏幕尺寸，簡(jiǎn)化了響應(yīng)式設(shè)計(jì)。
<body class="bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4 mb-4 sm:bg-green-500 md:bg-red-500 lg:bg-purple-500 xl:bg-orange-500">
盒子顏色隨屏幕大小而變化
</div>
<p class="text-gray-700 mb-4 sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
文字大小隨屏幕大小而變化
</p>
</body>不過(guò)，把所有樣式直接寫(xiě)在 HTML 中可能導(dǎo)致代碼變得冗長(zhǎng)，類名字符串過(guò)長(zhǎng)，降低代碼的可讀性，這也是部分開(kāi)發(fā)者不喜歡 Tailwind CSS 的主要原因。
Github：https://github.com/tailwindlabs/tailwindcss
UnoCSS
UnoCSS 是 Anthony Fu（Vue 和 Vite 的核心團(tuán)隊(duì)成員之一）開(kāi)發(fā)是一個(gè)即時(shí)、按需的原子級(jí) CSS 引擎，它專注于提供輕量化、高性能的 CSS 解決方案。UnoCSS 的設(shè)計(jì)理念是提供一個(gè)高性能且具靈活性的即時(shí)原子化 CSS 引擎，可以兼顧產(chǎn)物體積和開(kāi)發(fā)性能。
UnoCSS 的主要特點(diǎn)：
- 即時(shí)、按需：UnoCSS 的加載和渲染速度非常快，可以立即進(jìn)行使用，不需要預(yù)先編譯。它通過(guò)靜態(tài)分析和 PurgeCSS 算法在編譯過(guò)程中自動(dòng)推斷和優(yōu)化樣式，并移除未使用的樣式。
- 原子級(jí) CSS：使用原子級(jí) CSS 樣式的概念，每個(gè)類只包含一項(xiàng)或幾項(xiàng)樣式屬性，可以在組件中靈活地組合和應(yīng)用這些類，以實(shí)現(xiàn)細(xì)粒度的樣式控制。
- 高性能：UnoCSS 可以比 Tailwind CSS 的 JIT 引擎快 200 倍，幾乎為零的開(kāi)銷意味著你可以將 UnoCSS 整合到你現(xiàn)有的項(xiàng)目中，作為一個(gè)增量解決方案與其他框架一同協(xié)作，而不需要擔(dān)心性能損耗。
- 靈活性和可定制性：UnoCSS 支持自定義工具類、變體、指令和圖標(biāo)，提供了更多的可選方案，并且兼容多種風(fēng)格的原子類框架。
Github：https://github.com/unocss/unocss
CSS-in-JS
CSS-in-JS 是一種將 CSS 樣式與 JavaScript 代碼結(jié)合的方法，它允許在 JavaScript 組件中編寫(xiě)和管理 CSS 樣式。雖然避免全局樣式?jīng)_突，但也增加了運(yùn)行時(shí)開(kāi)銷和包體積。
Styled Components
Styled Components 是目前使用最多的 CSS-in-JS 庫(kù)，專為 React 和 React Native 設(shè)計(jì)，不過(guò)最近出來(lái)很多新的 CSS-in-JS 庫(kù)，Styled Components 的下載量開(kāi)始走下坡路。Styled Components 允許開(kāi)發(fā)者在 JavaScript 組件中直接編寫(xiě) CSS 樣式，從而實(shí)現(xiàn)樣式與組件邏輯的緊密集成。通過(guò)使用標(biāo)簽?zāi)０遄置媪浚琒tyled Components 提供了一種直觀且靈活的方式來(lái)定義組件的樣式。
Styled Components 的使用方式也非常簡(jiǎn)單：
import React from 'react';
import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
function MyUI() {
return (
<Wrapper>
<Title>Hello 前端充電寶!</Title>
</Wrapper>
);
}Styled Components 雖然提供了組件化和動(dòng)態(tài)樣式的便利，但其性能開(kāi)銷、調(diào)試難度和代碼冗余等問(wèn)題導(dǎo)致部分開(kāi)發(fā)者不喜歡使用它。
Github：https://github.com/styled-components/styled-components
Emotion
Emotion 是一個(gè)流行的 CSS-in-JS 庫(kù)，專為 React 設(shè)計(jì)。它允許開(kāi)發(fā)者以 JavaScript 的方式編寫(xiě) CSS 樣式。Emotion 提供了一種靈活且強(qiáng)大的方式來(lái)管理組件的樣式，支持動(dòng)態(tài)樣式、主題定制、自動(dòng)前綴處理等功能。
使用方式和 Styled Components 大同小異：
import styled from '@emotion/styled'
const Button = styled.button`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
color: black;
font-weight: bold;
&:hover {
color: white;
}
`
render(<Button>This my button component.</Button>)Github：https://github.com/emotion-js/emotion
vanilla-extract
vanilla-extract 是一個(gè)創(chuàng)新性的 CSS-in-JS 庫(kù)，它的目標(biāo)是提供一種簡(jiǎn)單、高效且類型安全的方式來(lái)處理樣式。相對(duì)于上面的兩個(gè)庫(kù)，vanilla-extract 的一個(gè)顯著特點(diǎn)就是無(wú)運(yùn)行時(shí)，樣式在構(gòu)建時(shí)處理，類似于Sass和Less，不會(huì)增加應(yīng)用的運(yùn)行時(shí)負(fù)擔(dān)。
用法如下：
// styles.css.ts
import { createTheme, style } from '@vanilla-extract/css';
export const [themeClass, vars] = createTheme({
color: {
brand: 'blue'
},
font: {
body: 'arial'
}
});
export const exampleStyle = style({
backgroundColor: vars.color.brand,
fontFamily: vars.font.body,
color: 'white',
padding: 10
});
// app.ts
import { themeClass, exampleStyle } from './styles.css.ts';
document.write(`
<section class="${themeClass}">
<h1 class="${exampleStyle}">Hello world!</h1>
</section>
`);Github：https://github.com/vanilla-extract-css/vanilla-extract
styled-jsx
styled-jsx 是一個(gè)用于在 React 項(xiàng)目中編寫(xiě) CSS 的庫(kù)，特別設(shè)計(jì)用于與 JSX 一起使用。它是由 Vercel開(kāi)發(fā)，旨在提供一種簡(jiǎn)單而直觀的方式來(lái)編寫(xiě)組件級(jí)的樣式，同時(shí)自動(dòng)處理作用域和關(guān)鍵沖突問(wèn)題。
使用方式如下：
import React from 'react';
function MyComponent() {
return (
<div>
<h1 className="title">Hello, World!</h1>
<style jsx>{`
.title {
color: blue;
font-size: 24px;
}
`}</style>
</div>
);
}
export default MyComponent;通用框架
Bootstrap
Bootstrap 是老牌 CSS 框架，最初是由Twitter的工程師開(kāi)發(fā)，旨在解決內(nèi)部項(xiàng)目中快速構(gòu)建一致且響應(yīng)式的用戶界面的問(wèn)題。
使用方式：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>現(xiàn)在，使用 Bootstrap 的人數(shù)一直在減少，主要是因?yàn)殚_(kāi)發(fā)者開(kāi)始傾向于使用更輕量、更易于定制的CSS解決方案，如CSS-in-JS庫(kù)和原子化的CSS框架，這些工具提供了更高的靈活性和集成度，以適應(yīng)不斷變化的設(shè)計(jì)趨勢(shì)和性能要求。同時(shí)，開(kāi)發(fā)者對(duì)于框架的特定集成和生態(tài)系統(tǒng)的需求也在增加，導(dǎo)致他們尋找更符合現(xiàn)代開(kāi)發(fā)實(shí)踐的替代品。
Github：https://github.com/twbs/bootstrap
