现代的网页开发，如何快速开发出一个功能齐全，并且好看又实用的网页呢？
我们曾经经常提到 CSS框架 ，但它到底是怎么样的一个东西？
正文 – CSS框架(组件库)的正确用法
CSS框架 事实上就是给你快速构建网站用的，也包括功能。比如说CSS框架提供了一个导航栏，你只需要在他们官网把代码复制下来，之后更改关键点就好了。比如说下面这个框架，就提供了很多功能
TailwindCSS 和 BootStrap5(引入) 比较频繁使用类名，但是如果希望快速开发网页的话，并且代码不混乱(很多类名)，CSS框架的精髓就应该是标签。如下面的css，如果我们需要卡片样式，就引入并使用 <Card> 标签，他们提供一些属性来DIY。这一点 AntDesign 做得很好
AntDesign – https://ant.design/
ui.shadcn – https://ui.shadcn.com/docs/
例如，我们想要构建一个 图片轮询/个人信息 页面，只需要把 CSS框架 里面提供的组件复制到本地，之后写 fetch 从后端取得数据，填入 CSS框架的“萝卜坑” 里就行了。
现代网页开发就是那么简单。
派别之争
但这其实是一个派别之争，我在 现代网页开发 教程里面书写的习惯是 – 类名 – 功能优先(Utility-First) 而本文的习惯是 标签 – 组件优先(Component-First)。
如果你希望你的代码不要出现太多类名导致混乱，并且更加快速地构建一个完美，好看的页面，那就可以试试 标签 – 组件优先(Component-First)。
你也可以亲切将这种 CSS框架 称之为 CSS组件库。
Tailwind CSS：核心思想是Utility-First（功能优先）。它的精髓在于类名。你不需要 Card 标签，只需要使用一系列原子化的类名（如 flex, bg-white, rounded-lg）来直接构建卡片。你无法直接使用
<Card>标签，你需要自己组合类名来创建卡片样式。Bootstrap 5：介于两者之间，但更偏向 组件优先。它提供了像 .card、.btn 这样的组件类，你只需要在你的
<div>或<button>上添加这些类，就可以得到一个预设样式的组件。它也有一些功能类（如 d-flex），但其核心仍然是组件类。Ant Design：核心思想是 Component-First（组件优先）。它的精髓在于标签。它提供了像
<Card>、<Button>这样的 React 组件。你不需要关心背后的 CSS 类名，只需要引入这些组件，然后通过它们的属性（props）来定制样式和行为，例如<Card title="My Card">。
开发流程
- 找到合适的模块/组件：从 UI 框架或组件库中，找到你需要的模块或组件（如导航栏、表单、表格、按钮）。
-
复制粘贴：将这些组件的代码粘贴到你的项目中。这些组件通常已经包含了样式和基础功能。
-
获得数据：在组件内部，使用 fetch 或其他 HTTP 客户端库（如 Axios）向后端发起请求，获取数据。
-
填充数据：将从后端获取的数据，通过 props 或状态管理，动态地填充到组件的相应部分。
你会得到什么？
这个流程让你能够专注于业务逻辑和数据流，而不用花费大量时间在 CSS 样式和基础组件的构建上。你可以把更多精力放在如何获取和展示数据，而不是如何让按钮居中或者如何设计一个美观的功能列表。
这正是 CSS 框架(组件库)受欢迎的原因
发表回复