Frontend Tools

Appearance

CSS 工具 ​

CSS 开发和处理工具集合。

CSS 框架 ​

Tailwind CSS ​

  • 简介: 实用优先的 CSS 框架
  • 链接: https://tailwindcss.com/
  • 特点:
    • 原子化 CSS
    • 高度可定制
    • JIT 编译
    • 响应式设计

UnoCSS ​

  • 简介: 即时按需的原子化 CSS 引擎
  • 链接: https://unocss.dev/
  • 特点:
    • 极快的性能
    • 完全可定制
    • 预设丰富
    • 纯 CSS 图标

Bootstrap ​

Bulma ​

  • 简介: 基于 Flexbox 的现代 CSS 框架
  • 链接: https://bulma.io/
  • 特点:
    • 纯 CSS，无 JavaScript
    • 模块化设计
    • 易于定制

CSS 预处理器 ​

Sass/SCSS ​

  • 简介: 成熟的 CSS 预处理器
  • 链接: https://sass-lang.com/
  • 特点:
    • 变量、嵌套、混入
    • 函数和运算
    • 模块系统
    • 生态成熟

Less ​

  • 简介: 动态样式语言
  • 链接: https://lesscss.org/
  • 特点:
    • 语法简洁
    • 易于学习
    • JavaScript 编写

Stylus ​

  • 简介: 富有表现力的 CSS 预处理器
  • 链接: https://stylus-lang.com/
  • 特点:
    • 语法灵活
    • 强大的功能
    • 可选的花括号

PostCSS 插件 ​

Autoprefixer ​

PostCSS Preset Env ​

cssnano ​

  • 简介: CSS 压缩优化工具
  • 链接: https://cssnano.co/
  • 特点:
    • 模块化优化
    • 安全压缩
    • 配置灵活

CSS-in-JS ​

styled-components ​

Emotion ​

  • 简介: 高性能的 CSS-in-JS 库
  • 链接: https://emotion.sh/
  • 特点:
    • 性能优异
    • 灵活的 API
    • SSR 支持
    • 源码映射

vanilla-extract ​

CSS 模块化 ​

CSS Modules ​

工具库 ​

Animate.css ​

Normalize.css ​

PurgeCSS ​

  • 简介: 移除未使用的 CSS
  • 链接: https://purgecss.com/
  • 特点:
    • 减小文件大小
    • 配置灵活
    • 框架支持

在线工具 ​

CSS Grid Generator ​

Flexbox Froggy ​

CSS Gradient ​

Clippy ​