2024 CSS 框架吗 你还在用
在如今的前端环球，曾经十分火爆的 CSS 框架能否依然坚持着昔日的辉煌？又有哪些新的 CSS 框架正在锋芒毕露，引领着前端开发的潮流呢？本文将带你一同探求目前最抢手的 CSS 框架，看看它们都有哪些优缺陷。
适用优先
适用优先的 CSS 框架旨在经过提供一系列预约义的、可组合的样式类，使开发者能够以起码的自定义CSS来极速构建现代和照应式的用户界面。这外面最具代表性的就是Tailwind CSS和UnoCSS。
Tailwind CSS
Tailwind CSS 是目前最火的 CSS 框架，它强调的是原子级的 CSS 类，它将各种样式定义为独立的类，开发者可以轻松地组合和运行这些类来构建出所需的样式。这种设计理念使得Tailwind CSS能够提供一套定义好了的class类字典，开发者只需经过组合这些类来成功各种样式的设计，而无需自己编写少量的CSS代码。
Tailwind CSS 不只内置了丰盛的CSS类，还可以在性能文件（tailwind.config.js）中自定义主题，包括色彩、字体、间距等，以顺应名目需求。它还提供照应式类，智能调整样式以顺应不同屏幕尺寸，简化了照应式设计。
<body><div>盒子色彩随屏幕大小而变动</div><p>文字大小随屏幕大小而变动</p></body>不过，把一切样式间接写在 HTML 中或者造成代码变得简短，类名字符串过长，降落代码的可读性，这也是局部开发者不青睐 Tailwind CSS 的关键要素。
UnoCSS 是Anthony Fu（Vue 和 Vite 的外围团队成员之一）开发是一个即时、按需的原子级 CSS 引擎，它专一于提供轻量化、高性能的 CSS 处置打算。UnoCSS 的设计理念是提供一个高性能且具灵敏性的即时原子化 CSS 引擎，可以统筹产物体积和开发性能。
UnoCSS 的关键特点：
CSS-in-JS 是一种将 CSS 样式与 JavaScript 代码联合的方法，它准许在 JavaScript 组件中编写和治理 CSS 样式。虽然防止全局样式抵触，但也参与了运转时开支和包体积。
Styled Components
Styled Components 是目前经常使用最多的 CSS-in-JS 库，专为 React 和 React Native 设计，不过最近进去很多新的 CSS-in-JS 库，Styled Components 的下载量开局走下坡路。Styled Components 准许开发者在 JavaScript 组件中间接编写 CSS 样式，从而成功样式与组件逻辑的严密集成。经过经常使用标签模板字面量，Styled Components 提供了一种直观且灵敏的形式来定义组件的样式。
Styled Components 的经常使用形式也十分繁难：
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 虽然提供了组件化和灵活样式的便利，但其性能开支、调试难度和代码冗余等疑问造成局部开发者不青睐经常使用它。
Emotion 是一个盛行的 CSS-in-JS 库，专为 React 设计。它准许开发者以 JavaScript 的形式编写 CSS 样式。Emotion 提供了一种灵敏且弱小的形式来治理组件的样式，支持灵活样式、主题定制、智能前缀处置等性能。
经常使用形式和 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>)vanilla-extract
vanilla-extract 是一个翻新性的 CSS-in-JS 库，它的目的是提供一种繁难、高效且类型安保的形式来处置样式。相关于上方的两个库，vanilla-extract 的一个清楚特点就是无运转时，样式在构建时处置，相似于Sass和Less，不会参与运行的运转时累赘。
用法如下：
// styles.css.tsimport { 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.tsimport { themeClass, exampleStyle } from './styles.css.ts';document.write(`<section><h1>Hello world!</h1></section>`);styled-jsx
styled-jsx 是一个用于在 React 名目中编写 CSS 的库，特意设计用于与 JSX 一同经常使用。它是由 Vercel开发，旨在提供一种繁难而直观的形式来编写组件级的样式，同时智能处置作用域和关键抵触疑问。
经常使用形式如下：
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 是老牌 CSS 框架，最后是由Twitter的工程师开发，旨在处置外部名目中极速构建分歧且照应式的用户界面的疑问。
经常使用形式：
<nav><a href="#">Logo</a><button type="button" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span></span></button><div><ul><li><a href="#">Home <span>(current)</span></a></li><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul></div></nav>如今，经常使用 Bootstrap 的人数不时在缩小，关键是由于开发者开局偏差于经常使用更轻量、更易于定制的CSS处置打算，如CSS-in-JS库和原子化的CSS框架，这些工具提供了更高的灵敏性和集成度，以顺应不时变动的设计趋向和性能要求。同时，开发者关于框架的特定集成和生态系统的需求也在参与，造成他们寻觅更合乎现代开发通常的代替品。
