Tailwind CSS是一个CSS框架，获得了令人难以置信的普及，根据State of CSS 2022的数据，使用量在三年内飙升了40％。
它提供了诸如开发速度，可维护性和GZIP优化之类的好处。结果，预计在2023年的调查中将超过50％。
但是，随着样式变得更加复杂，尾风CSS的可读性急剧降低，这是公用事业第一方法的典型缺点。
我个人推荐我的图书馆CSS Lube，但是在本文中，我想介绍一些简单的技巧，可以在使用Atomic CSS方法时可以改善开发人员体验。
1.积极使用换行符
人的眼睛可以同时识别多行文本。
适当的线路休息是通过允许我们利用外围视觉来提高代码可读性的好方法。
有一种说法，咬人可以咀嚼不止一个，但就我个人而言，我认为有足够的代码折断是更好的。
此外，当打破标签属性的线路时，使用额外的选项卡改善了由于实用程序优点方法而变得肿的标签的可读性。
// jsx
<button onClick={handle_click}
class={`flex column ai=center
:hover/bold
:hover/c=--gray-10 @dark@:hover/c=--gray-80`}>
Click me!
</button>
// svelte
<button on:click={handle_click}
class="flex column ai=center
:hover/bold
:hover/c=--gray-10 @dark@:hover/c=--gray-80">
Click me!
</button>
2.使用&&或||代替三元运算符
如果您想要开/关风格而不是基于状态值的选择，建议使用&&或||而不是三元运算符。
clsx库可以从classList中排除无效的值，但是如果允许无效的值在classList中，则可以在没有任何其他工具的情况下更方便地编写样式。
// jsx + clsx
<button onClick={handle_click}
class={clsx("flex column ai=center",
is_active && "tf=scale(1.2)",
is_disable || "c=--primary")}>
Click me!
</button>
// svelte
<button on:click={handle_click}
class="flex column ai=center
{is_active && "tf=scale(1.2)"}
{is_disable || "c=--primary"}">
Click me!
</button>
// result
<button on:click={handle_click}
class="flex column ai=center false true">
Click me!
</button>
3.使用单独的JS文件应用语义样式
撰写公用事业 - 首先，建议在单独的JavaScript文件中声明复杂样式。
这种方法使您可以以实用优先风格快速，轻松地工作，并在样式的整体效果比单个样式更重要时利用语义样式。
与CSS不同，使用JavaScript也具有接收强大的IDE支持的优势。
// style.js
export default {
main: {
scrollbar: {
primary: `::-webkit-scrollbar/w=.5
::-webkit-scrollbar-track/bg=--primary-70
::-webkit-scrollbar-thumb/bg=--primary-50;br=.25`
},
}
}
结论
大多数前端开发人员都会同意内联风格很方便。
但是，与使用公用事业 - 首先（特别是CSS Lube）相比，我有时在编写内联风格时会感到不舒服的反向感觉。
公用事业首先使我们的手指懒惰，并允许我们在大脑上使用额外的能量。
此外，本文介绍的技巧，如果您可以减轻公用事业优先的缺点，则可以显着改善开发人员的体验。
谢谢。