前端开发中的CSS框架:昔日辉煌与新兴潮流

在前端开发的快速演进中,CSS框架一直是构建响应式、现代用户界面的重要工具。本文将探讨当前最热门的CSS框架,分析它们的优缺点,并展望未来的发展趋势。

实用优先的CSS框架

实用优先的CSS框架通过提供预定义的、可组合的样式类,使开发者能够以最少的自定义CSS快速构建现代和响应式的用户界面。其中,Tailwind CSS和UnoCSS是最具代表性的两个框架。

Tailwind CSS

Tailwind CSS是目前最火的CSS框架,它强调原子级CSS类,将各种样式定义为独立的类,开发者可以轻松组合这些类来构建所需样式。这种设计理念使得Tailwind CSS能够提供一套定义好了的class类字典,开发者只需通过组合这些类来实现各种样式的设计,而无需自己编写大量的CSS代码。

网站链接:https://www.tailwindcss.cn/

Tailwind CSS不仅内置了丰富的CSS类,还可以在配置文件(tailwind.config.js)中自定义主题,包括颜色、字体、间距等,以适应项目需求。它还提供响应式类,自动调整样式以适应不同屏幕尺寸,简化了响应式设计。

css 复制代码
<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>

不过,把所有样式直接写在 HTML 中可能导致代码变得冗长,类名字符串过长,降低代码的可读性,这也是部分开发者不喜欢 Tailwind CSS 的主要原因。

UnoCSS

UnoCSS是Anthony Fu(Vue和Vite的核心团队成员之一)开发的一个即时、按需的原子级CSS引擎,它专注于提供轻量化、高性能的CSS解决方案。UnoCSS的设计理念是提供一个高性能且具灵活性的即时原子化CSS引擎,可以兼顾产物体积和开发性能。

网站链接: UnoCSS: The instant on-demand Atomic CSS engine

UnoCSS的主要特点包括:

  • 即时、按需:UnoCSS的加载和渲染速度非常快,可以立即进行使用,不需要预先编译。它通过静态分析和PurgeCSS算法在编译过程中自动推断和优化样式,并移除未使用的样式。
  • 原子级CSS:使用原子级CSS样式的概念,每个类只包含一项或几项样式属性,可以在组件中灵活地组合和应用这些类,以实现细粒度的样式控制。
  • 高性能:UnoCSS可以比Tailwind CSS的JIT引擎快200倍,几乎为零的开销意味着你可以将UnoCSS整合到你现有的项目中,作为一个增量解决方案与其他框架一同协作,而不需要担心性能损耗。
  • 灵活性和可定制性:UnoCSS支持自定义工具类、变体、指令和图标,提供了更多的可选方案,并且兼容多种风格的原子类框架。

CSS-in-JS

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

css 复制代码
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

Emotion是一个流行的CSS-in-JS库,专为React设计。它允许开发者以JavaScript的方式编写CSS样式。Emotion提供了一种灵活且强大的方式来管理组件的样式,支持动态样式、主题定制、自动前缀处理等功能。

Github: https://github.com/emotion-js/emotion

css 复制代码
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,不会增加应用的运行时负担。

Github:https://github.com/vanilla-extract-css/vanilla-extract

css 复制代码
// 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>
`);

styled-jsx

styled-jsx是一个用于在React项目中编写CSS的库,特别设计用于与JSX一起使用。它由Vercel开发,旨在提供一种简单而直观的方式来编写组件级的样式,同时自动处理作用域和关键冲突问题。

css 复制代码
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的工程师开发,旨在解决内部项目中快速构建一致且响应式的用户界面的问题。

css 复制代码
<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>

现在,使用Bootstrap的人数一直在减少,主要是因为开发者开始倾向于使用更轻量、更易于定制的CSS解决方案,如CSS-in-JS库和原子化的CSS框架,这些工具提供了更高的灵活性和集成度,以适应不断变化的设计趋势和性能要求。同时,开发者对于框架的特定集成和生态系统的需求也在增加,导致他们寻找更符合现代开发实践的替代品。

Github:

结语

随着前端技术的不断发展,CSS框架也在不断进化。从昔日的Bootstrap到如今的Tailwind CSS和UnoCSS,再到CSS-in-JS库,每一种框架都有其独特的优势和适用场景。开发者应根据自己的项目需求和团队习惯,选择最合适的框架,以提高开发效率和用户体验。

相关推荐
蜜桃小阿雯16 分钟前
JAVA开源项目 微服务在线教育系统 计算机毕业设计
java·开发语言·spring boot·微服务·java-ee·开源·maven
雪碧聊技术18 分钟前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan23 分钟前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
言之。30 分钟前
【K-Means】
算法·机器学习·kmeans
会发光的猪。42 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒43 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun1 小时前
react的import 导入语句中的特殊符号
前端·react.js
前端青山1 小时前
webpack指南
开发语言·前端·javascript·webpack·前端框架
hummhumm1 小时前
第 10 章 - Go语言字符串操作
java·后端·python·sql·算法·golang·database
Jeffrey_oWang1 小时前
软间隔支持向量机
算法·机器学习·支持向量机