在前端项目中，围绕CSS的框架一直是有意思的话题，各种框架技术总是折腾来折腾去，CSS，SCSS，SASS，Bootstrap，... 这里有一个2024年的CSS框架列表，随便一列都有几十种之多，而且是“Awesome”的：https://github.com/troxler/awesome-css-frameworks。

究其原因，就是CSS这项技术其实并不算简单——至少在可维护性和技术实现上的平衡不是很容易做到——写着写着总感觉会有些别扭。

直到开始尝试Tailwind CSS之后，这一切似乎清晰了起来。

要不要“Semantic” CSS？

你总是需要对样式改来改去，才能实现出满意的效果。为了让网页变得好看，传统的做法都是为一个div或者其他什么元素设置一个class。比如，通过一个.text-center的class来让文字居中：

<p class="text-center">
    这篇文章为大家介绍一下Tailwind CSS
</p>

然后，再通过.text-center来实现：

.text-center {
    text-align: center;
}

这再平常不过了。但是有人说，这样不好。你的HTML和样式混杂在一起了。 HTML应该管类容，CSS才管样式。

所以你应该这样写，用.blog-content来表示这是一段博客文字内容。这样，你的HTML更加语义化，而跟你的CSS隔离开了：

<p class="blog-content">
    这篇文章为大家介绍一下Tailwind CSS
</p>

如果你想调整网页的样式，你只需要更改CSS即可！看吧，简单改了个名字，但效果却大不一样！

但是这种想法实践起来过于理想，它在主要问题是：

所谓“样式”跟“结构”是没法完全分开的，布局改变也意味着需要HTML结构改变，这些没法单纯在CSS中实现
这种实践起来最终结果大概率是CSS和HTML元素内容一一对应，以至于实际上，写.blog-content其实与.a001并没有太大的区别

一种常见的场景是，同样是博客内容但是在列表和详情页面样式会不一样，但是从“Semantic”的角度来说，它们应该是一样的，比如都叫.blog-content。这样为了在CSS中区分，就必须把上下文也包含进去，以便容易通过CSS多层选择器来区分。一种做法是BEM：

<div class="blog">
    <h1 class="blog__title">Tailwind CSS Introduction</h1>
    <p class="blog__content">
        这篇文章为大家介绍一下Tailwind CSS
    </p>
</div>

好吧，看起来更加“Semantic”了，但是冗长又啰嗦，这就足够劝退一部分人了。

所以也许在HTML中想把样式和内容彻底分离这种想法本身就不合理。

样式的复用

这样，如果要改变某一个div的样式，直接去改它对应的class就可以了。

但是这样有一个问题，如果系统复杂的情况下：

我们不可能给每一个div都单独一个class，势必需要复用一些已有的样式，也就是说，多个div会应用到同一个class
不同的class中也会有重复的样式，为了进一步复用，那么可以将它们再分散成不同的class进行组合

比如说这样：

.flex {
    display: flex;
    flex-direction: row;
}

.full {
    flex: 1;
}

这样在html中可以通过组合一些class来实现复用：

<div class="container flex">
    <div class="flex">Sidebar</div>
    <div class="flex full">Content</div>
</div>

提供一些基础的class样式来实现组合，这是一个简单但又确实有用的思想。这样的框架其实很多，像Bootstrap就是，但现在你会看到Tailwind CSS十分流行。

究其原因，大概是因为这个框架封装的确实很有格调。比如，下面这一段代码：

<div className="relative flex flex-col h-screen">
  <Navbar />
  <main className="container mx-auto max-w-7xl px-6 flex-grow pt-16 flex flex-col">
    {children}
  </main>
  <footer className="w-full flex items-center justify-center py-3">
    Copyright &copy; 2024 Y Tech,ltd.
  </footer>
</div>

首先，跟传统的写法不一样，你不需要去对着css就大概能直接看出这个页面的布局——非常直观。当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。

其次，这些命名本身是极其讲究的，当你习惯之后，你会很容易记住。比如，py-3和justify-center，并不是说越短越好，关键是好记。相比之下，像Bootstrap这种col-xs-offset-3，总是要想一想的。

除了使用Tailwind CSS来作为基础样式库之外，它跟一些UI框架的结合也是十分到位的。

比如，使用Next UI和Tailwind CSS可以很容易实现响应式布局：

<NavbarContent
  className="hidden sm:flex basis-1/5 sm:basis-full"
  justify="end"
>
  <NavbarItem className="hidden sm:flex gap-2">
    <ThemeSwitch />
  </NavbarItem>
  <NavbarItem className="hidden sm:flex">
    <UserInfo />
  </NavbarItem>
</NavbarContent>

^[1]

↑ https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

[1] ttps://adamwathan.me/css-utility-classes-and-separation-of-concerns/

[1]