应直接使用组件库预定义CSS类名，避免手写样式；注意框架要求的DOM结构；按需引入CSS减少体积；交互功能需JS补全；表格分页排序等功能必须依赖JS实现。
直接用组件库的 CSS 类名，别自己写样式
绝大多数 CSS 框架（如 Bootstrap、Tailwind CSS、Ant Design 的 CSS 版本）都提供预定义的类名来快速渲染按钮、导航和表格。你不需要写 .btn 的样式规则，只要在 HTML 元素上加对应类即可生效。
常见误区是试图“只引入 CSS 文件，再手写 HTML 结构”，但漏掉框架要求的 DOM 结构层级。比如 Bootstrap 的导航栏需要 nav + ul + li + a 嵌套，Tailwind 则更自由，但语义结构仍影响可访问性。
- 按钮：用
btn（Bootstrap）、bg-blue-500 hover:bg-blue-600（Tailwind）、ant-btn（Ant Design CSS）等类名 - 导航：注意是否需要包裹容器（如
navbar或nav-menu），子项是否需nav-item或menu-item - 表格：基础类如
table、table-striped、ant-table通常只控制外观，分页/排序需额外 JS 支持
按需引入 CSS，避免全量加载拖慢首屏
像 Bootstrap 5 的完整 bootstrap.min.css 有 200KB+，但你可能只用到按钮和表格。直接全量引入会显著拉长 First Contentful Paint。
推荐做法是：
立即学习“前端免费学习笔记（深入）”；
- 用官方提供的 Sass 源码，
@import只需的模块（如bootstrap/scss/buttons、bootstrap/scss/tables） - Tailwind 用户应配置
content路径，让 PurgeCSS 自动剔除未使用的类 - Ant Design CSS 版本不支持按需，建议改用
@ant-design/cssinjs或直接上 React 组件版（如果项目已用 React）
按钮和导航的交互状态要靠 JS 补全
CSS 类名能搞定静态样式，但点击反馈、下拉展开、当前页高亮这些行为，纯 CSS 很难可靠实现。
例如：
- Bootstrap 的
dropdown需要引入bootstrap.bundle.min.js或单独加载 Popper + Bootstrap JS - Tailwind 本身无 JS 行为，下拉菜单必须自己写
click监听或集成 Alpine.js - 导航中的
active状态通常需运行时判断当前 URL 并动态添加类，不能仅靠 CSS
没配 JS 时常见现象：下拉菜单点不动、按钮点击无反馈、导航高亮错位——这不是样式问题，是行为缺失。
表格分页/排序/搜索别指望纯 CSS 解决
所有主流 CSS 框架的表格类（table-bordered、ant-table、ui-table）只负责视觉呈现。真实业务中需要的分页、列排序、搜索过滤，100% 依赖 JS 控制数据源和重渲染。
典型处理路径：
- 用框架配套的 JS 组件（如 Bootstrap Table、Ant Design Table）——它们把 CSS 类和 JS 行为打包好了
- 自己用
fetch拿数据，再用innerHTML或模板字符串拼接带正确类名的<tr><td>，但分页逻辑得手写 <li>若用 Vue/React，优先选对应生态的封装组件（如 <code>el-table、antd/Table），而非只套 CSS 类
最容易被忽略的是：表格内容动态更新后，原 CSS 类还在，但 JS 绑定的事件或状态没同步，导致点击无响应或排序失效。
