CSS教程和技巧收藏
# 如何选择适合的组件库？
在选型时，建议问自己以下三个问题：
产品类型是什么？
- B端 (后台/SaaS)： 效率第一。首选 Ant Design 或 Element Plus。不需要自己写 DatePicker 或 Table 的复杂逻辑。
- C端 (官网/活动页/面向大众)： 视觉第一。首选 Tailwind CSS + Headless UI (或 Shadcn/ui)，因为你需要高度定制独特的 UI。
团队技术栈与规范？
- 如果是 TypeScript 重度依赖，Naive UI (Vue) 或 MUI/Chakra (React) 的类型提示会更友好。
- 如果团队设计资源匮乏，直接用设计风格强烈的库（如 AntD）。
是否考虑 CSS 原子化？
- 如果团队习惯写 CSS/Sass，AntD/Element 没问题。
- 如果团队推崇 Tailwind CSS，强烈建议使用 Shadcn/ui 或 NextUI，因为传统的组件库很难和 Tailwind 完美融合。
# 如何自建组件库？
如果你是架构师或者想提升技术深度，搭建一套企业私有组件库是必经之路。
- 开发工具：
- Storybook: 组件开发的标配。用于隔离开发、测试和编写文档。
- Vite / Rollup: 打包工具的首选（Webpack 在库打包方面配置过于繁琐）。
- 代码管理：
- Monorepo (pnpm workspace / Turborepo): 适合管理多包架构（核心库、图标库、工具库分开）。
- Changesets: 管理版本发布和 Changelog 的神器。
- 核心难点：
- 主题定制 (Theming): 如何通过 CSS Variables 实现动态换肤
- Tree Shaking: 确保用户只引入了用到的组件，而不是整个包。
- TypeScript 类型生成: 提供完美的类型提示。
# Headless UI (无头组件)
只提供交互逻辑和可访问性（Accessibility/A11y），完全不带样式。
Headless UI（无头用户界面）是一种前端开发方法论或设计模式，核心思想是将UI组件的逻辑与样式分离，仅提供交互功能和状态管理，不包含预设样式。开发者需自行通过CSS实现视觉表现。
代表库： Radix UI (opens new window), Headless UI (opens new window), TanStack Table (opens new window), React Aria (opens new window)。
适用场景： 你有非常具体的设计稿（Design System），使用 AntD 这种自带强样式的库去覆盖样式会非常痛苦，这时候 Headless UI 是最佳选择。
核心特点
- 逻辑与样式分离：组件仅处理交互逻辑（如键盘导航、焦点管理），样式需开发者自定义 。
- 高度可定制：适用于不同UI风格但交互逻辑相似的场景，例如Tailwind CSS与Headless UI的结合 。
- 无预设样式：组件本身不渲染任何DOM元素，仅暴露API供外部调用 。
# shadcn/ui
shadcn/ui is a set of beautifully-designed
它不是一个传统的组件库（你不能 npm install 它）。
- 核心理念： 它提供代码，你直接 Copy & Paste 到你的项目中。
- 技术栈： Radix UI (Headless 逻辑) + Tailwind CSS (样式)。
- 优势： 你拥有组件的全部代码，想怎么改就怎么改，彻底解决了“魔改组件库样式难”的问题。
https://ui.shadcn.com/themes (opens new window)
# tailwindcss
https://www.tailwindcss.cn/docs/installation (opens new window)
# Element UI
https://element.eleme.cn/#/zh-CN (opens new window)
# Element Plus
饿了么团队，Vue 生态的“老大哥”，文档和社区最成熟。Vue 项目的默认选择。 https://element-plus.org/#/zh-CN (opens new window)
# Naive UI
尤雨溪推荐，TypeScript 支持极好，设计风格独特（有点偏极客）。追求 TS 体验和独特设计的项目。 https://www.naiveui.com/zh-CN/os-theme (opens new window)
# TDesign
腾讯出品，支持 Vue/React/小程序等多端，设计体系统一。需要多端统一设计语言的大型项目。 https://static.tdesign.tencent.com/ (opens new window)
# Ant Design
阿里出品，企业级，生态最全，组件逻辑极其成熟。国内企业级后台、中台系统首选。 https://4x-ant-design.antgroup.com/components/form-cn/ (opens new window)
# Arco Design
字节跳动出品，设计风格更现代、轻盈，配置灵活。觉得 AntD 审美疲劳，想要更现代风格。
https://arco.design/ (opens new window)
# NutUI
京东出品，针对电商场景优化，组件丰富。(Vue/React)
https://nutui.jd.com/#/ (opens new window)
# React Bootstrap
https://react-bootstrap.github.io/ (opens new window)
# MUI (Material UI)
Google Material Design 风格，全球使用率最高，定制能力强。面向国际用户的产品。
https://material-ui.com/ (opens new window)
# Vant
有赞出品，移动端电商领域的绝对霸主，轻量、可靠。(VUE)
https://youzan.github.io/vant/#/zh-CN/ (opens new window)
# View UI
https://www.iviewui.com/ (opens new window)
# same
Build websites by chatting with AI
https://same.new/ (opens new window)
# Flex 布局教程：语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (opens new window)
# CSS Grid 网格布局教程
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html (opens new window)
# 五种 CSS 经典布局
http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html (opens new window)
# 各种CSS生成器和JS代码片段
https://juejin.cn/post/7030572979868139551?utm_source=gold_browser_extension (opens new window)
# CSS Tricks
CSS技巧收集与演示
http://css-tricks.neatbang.com/ (opens new window)
# CSS生成器
https://neumorphism.io/ (opens new window)
# CSS渐变生成器
https://www.colorzilla.com/gradient-editor/ (opens new window)
# CSS3-Box Shadow(阴影>
https://www.html.cn/tool/css3Preview/Box-Shadow.html (opens new window)
# 贝塞尔曲线生成器
https://cubic-bezier.com (opens new window)
# 花纹背景生成器
http://www.heropatterns.com/ (opens new window)
# 花纹背景-pattern.css
https://github.com/bansal-io/pattern.css (opens new window)
# 3D字体
https://bennettfeely.com/ztext/ (opens new window)
# css-tricks
css技巧文章
https://css-tricks.com/ (opens new window)
# You-need-to-know-css
CSS的各种DEMO，很全
https://lhammer.cn/You-need-to-know-css/#/zh-cn/ (opens new window)
# animista
CSS动画可视化工具，复制代码就能用
https://animista.net/ (opens new window)
# navnav
各种炫酷的CSS动画组件