一种新的编写css思维

每个前端开发者都经常根据业务的进行写着大量重复的 css 样式，写时一时爽，维护火葬场。

随着业务的发展，css 代码会变得越来越多越来越难以维护。

经常会出现 important 强行改变 css 的样式，这样做的唯一好处就是能够符合当前业务需求，但是自己挖的坑，可能是别人哭爹骂娘跪着填上的，而这一切仅仅是因为大量重复的垃圾代码。

css 魔法数字

在代码重构中有一点就是减少你代码中的魔法数字。

我们在写 css 的时候经常会写

body {
  /** 经常使用#fff的人会知道这是白色，
     ** 那么换个颜色呢 #A855F7 
     ** 这个是紫色 
     **/
  color: #fff;

  /** 又或者这种4px，4px 到底代表什么，我需要全局搜索改变所有的4px吗
     **/
  border-raduis: 4px;
}

这样的代码我们一遍又一遍地 style 标签里面书写，增大我们 css 文件的体积。

css 框架

前端 css 框架有很多，以比较流行的Bootstrap来举例。

Bootstrap 提供了 布局、组件、工具样式类，他们用来搭建 Bootstrap 风格的网站很好用，但是如果定制化的时候，他们太重了，一切变得不那么灵活。

当我们要定制一个自己风格的样式的时候需要做大量的样式阅读，以防不小心影响其他组件，极其难以维护。

这一切来自于 css 代码的副作用（各种 css 权重之间的影响)

是时候在灵活性和快速使用之间做抉择了。

如果你喜欢开箱即用，当前一定使用了一个组件库，如果你想从头搭建一套高可用并且容易维护的组件库或者网站，那么应该尝试一下 tailwindcss 了。

tailwindcss

用组合的方式去编辑你的样式代码

tailwindcss 提供了各种样式的工具类，从布局，间距，大小，文字，颜色每个都提供了工具类。

有了这些工具类，我们可以尽情地组合样式。

组件化开发

正如前端的发展，每一个前端框架都提供着组件化的开发模式，不提倡组件间继承，而是通过组合的方式去开发维护组件。

那么 html 的样式也应该如此，换种方式去编写你的代码吧。

// 正常代码
<div class="card">
</div>
<style>
.card {
    border-radiux: 0.25rem;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
</style>

// tailwindcss
<div class="rounded shadow"></div>

两份代码同样实现了一个这样的卡片，第一种写法如果我要修改圆角我会增加或者减少 rem 的值，但是下面的写法我只需修改一个更加语义化的类名即可。

再也不用想如何定义我的类名了card-title card-head-title card-body-content，只要定义好我的组件名就可以在 react 中,配合 classnames 更是能让外层直接通过类去改变组件样式，拓展性变得更强大，更加灵活。

总结

tailwindcss 是一个强大的 css 工具类库，能够让我们编写更加灵活的，易于复用的样式代码，优化无用样式，减少 css 文件体积，方便拓展。

当然任何事物都有好的和坏的一面，tailwindcss 不好的点在于，虽然 css 文件体积缩小，但是 html 中存在大量的类名，而且各种缩写需要一定时间熟悉。

什么时候应该用 tailwindcss 呢？ 如果你厌烦了无时无刻重复编写 css 代码，如果你想要自己的网站或者组件更加灵活，tailwindcss 值得一试。