查看“︁Tailwind CSS”︁的源代码

在前端项目中，围绕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来让文字居中：

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

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

<syntaxhighlight lang="css">
.text-center {
    text-align: center;
}
</syntaxhighlight>

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

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

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

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

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

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

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

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

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

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

= 样式的复用：组合还是继承？ =

其实，各种CSS框架尝试去解决的问题无非就是一个——如何进行复用。

如果有一段代码逻辑，你需要写N遍，那么很自然你会用一个方法来封装一下，不至于每次都写一遍。

在网页中，相同的样式、相同的组件、相同的布局，等等，是太多太多了。

所以，类似是组合还是继承更优的话题，其实在CSS里面也有：

* 通过样式A衍生出一个样式B，姑且称之为继承
* 两个完全不相干的样式A和B在一起使用，姑且称之为组合

比如说对flex布局设计两个class用来组合：

<syntaxhighlight lang="css">
.flex {
    display: flex;
    flex-direction: row;
}

.full {
    flex: 1;
}
</syntaxhighlight>

在HTML中：

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

提供一些基础的class样式——CSS工具类来实现组合，这是一个简单但又确实有用的思想。
这样的做法又被称为是Utility-first的方式。

= Tailwind CSS体验 =

现在，你会看到Tailwind CSS十分流行。很多流行的框架都提供Tailwind CSS的支持。

Tailwind CSS使用起来也比较简单。比如，下面这一段代码：

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

HTML跟样式不分离的好处这里就体现出来了。你不需要去对着css就大概能直接看出这个页面的布局。
当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。

或许，这才是真正的HTML和CSS分离——我们不需要记住CSS的很多语法，取而代之，只需要知道要怎么使用。

<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>

[[Category:Hacker Radar]]