怎么理解功能类优先？

Question

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

如何理解功能类优先？

Answer 1

CSS的类名往往会分为 语义类 和 功能类两种命名方式。

以前大部分的情况下，我们都会根据页面中模块的功能来命名的这种方式。使整个页面看起来就比较清晰了，维护起来也比较方便。
比如说这样。

<section class="layout">
  <header class="layout-hedaer">
    <nav class="layout-nav"></nav>
  </herader>
  <section class="layout">
    <aside class="layout-sider"></aside>
    <main class="layout-content"></main>
  </section>
  <footer class="layout-footer"></footer>
</div>

但是这样按照功能来定义的CSS类，如果有一些单独的样式需求就会需要再写一个单独的CSS类。
也会有很多重复的部分出现。比如说现在会大量应用 flex 布局。

所以我们也会把 flex、justify-between、items-center、flex-1 这样的高重复的原子类提取出来，来覆盖复用的情况。这种就是功能类命名方式。

功能类优先就是优先考虑使用功能类的方式来设置元素样式，如果确实不方便在考虑使用语义类这种自定义的CSS类来实现，并不是说就完全不用了。