为什么我不喜欢 Tailwind CSS：初级前端开发人员的视角-css教程-PHP中文网

为什么我不喜欢 Tailwind CSS：初级前端开发人员的视角

王林

发布： 2024-07-20 22:58:41

原创

735 人浏览过

作为一名初级前端开发人员，我尝试了各种 CSS 方法，以寻找最有效且可维护的 Web 应用程序样式设计方法。我的旅程从普通 CSS 过渡到 Bootstrap 和 Material-UI (MUI)，最终引导我接受 CSS-in-JS 解决方案，特别是 Emotion 及其样式化组件。

随着时间的推移，我对不同的造型方法形成了强烈的看法。 Tailwind CSS 是一种不太让我信服的流行工具。尽管它被广泛采用，但我发现它很难理解。

Image description

我的 Tailwind CSS 问题

虽然 Tailwind CSS 越来越受欢迎，但我发现有几个方面与我的开发偏好不符：

可读性问题：Tailwind 实用程序优先的方法通常会导致 HTML 元素中出现长字符串类。这会使代码难以一目了然地阅读和理解。
关注点分离：Tailwind 将样式直接混合到 HTML 中，这违背了结构与表示分离的原则。这会使在大型项目中维护和更新样式变得更加困难。
自定义复杂性：虽然 Tailwind 是可自定义的，但这样做通常需要额外的配置。这可能比简单地编写自定义 CSS 或扩展样式组件更复杂。这些问题引导我探索替代方案，最终引导我发现并欣赏样式化组件。

样式化组件是 CSS-in-JS 解决方案，允许您编写实际的 CSS 代码来设置组件的样式。它们使您能够使用 JavaScript 模板文字定义样式，使它们的范围仅限于特定组件并降低样式冲突的风险。

const Button = styled.button`
  background-color: blue;
  border-radius: 4px;
`;

登录后复制

我喜欢样式组件的主要原因之一是它们与我喜欢的项目结构的集成程度如何。对于每个组件，我通常创建一个包含以下文件的专用文件夹：

MyComponent/
├── MyComponent.tsx
└── MyComponent.styles.ts

登录后复制

这种分离使我能够保持组件逻辑清晰且集中，同时仍然保持组件及其样式之间的紧密联系。

提高可读性：通过将样式分离到自己的文件中，组件逻辑和样式都变得更具可读性。我可以快速扫描 .tsx 文件以了解组件结构和行为，并轻松参考 .styles.ts 文件以获取样式详细信息。
模块化和可重用性：样式组件本质上是模块化的。我可以轻松地在不同组件之间重用样式，或者通过扩展其基本样式组件来创建组件的变体。
类型安全：使用 TypeScript 时，样式化组件提供出色的类型安全性。我可以为我的样式化组件定义道具类型，确保我使用正确的道具进行样式化。
轻松重构：如果我需要更改组件的结构或样式，拥有单独的文件可以轻松找到和修改相关代码，而不会影响应用程序的其他部分。
动态样式：我可以根据道具或主题值轻松创建动态样式。