Tailwind CSS 入门——浅谈CSS原子化、语义化

Tailwind CSS，是一个功能类优先的CSS框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

官网地址：https://tailwindcss.com/ V3版本目前还没有中文文档，需要看中文文档的可以看V2版本。

来自stateofcss2022年的问卷统计，Tailwind CSS在全球范围内的影响正在稳步上升，不过因为来自中国的受访者人数并不多，所以无法得知Tailwind在国内的影响如何，但从个人接触的开源项目来看，Tailwind CSS正在被越来越多的使用，当然，我也是不遗余力地向周围的同事推广Tailwind CSS 😁

原子类与语义化CSS、抽象化

原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能，从tailwind来看，一个原子类就是一个css属性值的描述，比如:

.flex { display:flex}
.text-center { text-align:center}
.pt-1 { padding-top:0.25rem}

Tailwind对原子类的特性实现得很好，同样流行的还有unocss，windycss。

其实在使用全面拥抱Tailwind CSS之前，我也有过挣扎。更早的时候，我是语义化CSS的践行者，反对原子类，觉得这和行内样式差不多，而且原子类在样式的复用上并不灵活。

语义化CSS，顾名思义就是CSS类名能够描述使用了这个class的元素的作用，比如描述一个产品列表：

<div class="product-list-wrap">
    <div class="product-list-hd">
        <h3>Hot Product</h3> 
    </div>
    <div class="product-list-bd">
        <ul>
            <li class="product-item">
                <div class="product-pic"><img .../></div>
                <div class="product-title">xxxxx</div>
                <div class="product-price">500.00</div>
            </li>
            ...
        </ul>
    </div>
    <div class="product-list-ft">
        <div><a href="">more...</a></div>
    </div>
</div>

在页面不多，而且功能简单的时候，语义化CSS确实很不错，层级清晰，容易定位。但是当新页面不断的被设计出来，项目又几经转手，那些庞杂又摸棱两可的className就让人头大了，这时候就是考验命名水平的时候了。

我接手过一个前端项目，前人留下了一个8000多行的样式表，里面充满了list1，list2，about1，about2，about3…还附送了一堆中文首字母拼音堆砌出的class。还好这是一个后台管理系统，实际样式并不复杂，所以接手后我把前任的样式表删了，抽象了一些classname，scss搭配着tailwind重新书写。

这里就说到classname的抽象和复用，bootstrap，element UI，ant Design这些，就是基于常用组件的抽象，CSS的类名不去具体描述这是一个产品列表还是文章列表，列表就用list，卡片状的元素就用card，对话框就是dialog… 页面可以看作是是各个组件的组合，配合适当的语义化，我们的样式表既能灵活服用，又能对某些特殊的组件做出单独的描述。

既然语义化加复用化也不错，为什么还要推荐原子类呢？

使用原子类的好处也是我在开发过程中逐渐体会到的。

首先，随着前端的发展，我们编写前端页面的方式已经改变。

从html+css+js，转变为vue/react+UI框架。UI框架极大降低了我们的工作量，也可以说UI框架本身就把抽象的那部分完成得八九不离十了，针对UI同学的设计稿，往往是直接去针对框架本身的样式做二次加工。那当我写页面、组件的时候，大部分样式tailwind都可以帮我完成。

其次，效率的提升。

语义化CSS最痛苦的就是取名字，一开始还好，product-list,user-list… 如果UI哪天即兴发挥，来几个不太一样的产品列表，又要苦思冥想这product-list怎么修改。原子类完全无需思考这个问题。

第三，tailwind是基于约束的，并且可以定制扩展

tailwind可以扩展定制符合自己需要的设计系统，虽然一个个原子类看起来好像行内样式，实际上原子类是基于统一规则，可以被统一修改和维护，不会像行内样式那样充满了各种各样的任意值。比如：文字颜色的类text-blue-500，如果修改了蓝色的颜色值，那么所有使用text-blue-500的文字都会发生变化。

大部分UI设计师在设计时也是基于UI设计规范，一会儿5px，一会8px，一会#ff6600，一会#ff6601的情况应该不多（如果多的话，那就要评估下专业能力了😄），tailwind看起来和UI配合得很不错。

如何书写CSS是一个个人经验积累与选择的结果，tailwind符合我目前项目需要，能够提升效能，但也不会一味的为了使用tailwind而抛弃其他方式，写得顺手写的开心才是最重要的。