从Tailwind移动到CSS变量

自从它发布以来，我一直在玩Tailewind CSS很多，到目前为止，在过去几年中，看到它的增长并与人们一起制作的一些整洁的事情，这一点非常令人印象深刻。

总的来说，我一直很满意它，我甚至购买了Tailwind UI的许可，以帮助我更快地发展。然而，有时候我发现自己有点沮丧，所以我决定重建我的Ruby日历项目的前端会很有趣，看看我是否可以找到我的烦恼。

文件！说真的，亚当·沃森用它做了一个梦幻般的工作。通常，当我只想检查如何在普通CSS中做某事时，我将文档用作参考点。

响应式效用变体非常酷。能够使用LG将CSS类应用于大屏幕：在我的班级名称超级可爱之前！

在我的常规CSS中使用@apply。这感觉就像写CSS的一种简洁方式，我是一个很大的粉丝。

CSS＆amp之间的较少上下文切换; HTML文件。我没有意识到我从整天跳跃的认知负载是多少。能够看看我正在努力的一切的单个文件，帮助我更容易进入那个令人敬畏的“超焦点”区域。

我可以复制的例子＆amp;粘贴（在我的项目中看起来也是如此），是一个大规模的节省时间。感觉就像我很快就可以在没有太多的努力的情况下为一个项目搭配一个项目。

预检。我总是发现这是超级侵略性，这可能是因为我来自我使用的背景，我已经使用了Normalize.css很多。必须为语义html设置基本样式，感觉乏味。

JavaScript依赖项。我在尾风v1上有一个项目，它使用的反应，我升级到v2。不幸的是，我有一个与之过了的库，这使我预期的升级更难。最后，我深入了解了JavaScript代码，试图弄清楚为什么我的CSS没有工作。它让我感到超级健康。

其他开发人员使用它不一致。我用尾风拿起了一些项目，在Codebase中有一个“在家里”中需要花费时间。在一个项目中，我觉得其他开发人员刚刚使用各类的各类，这使得这使得“快乐开发商”时刻很难。

CSS清除。我过去一直陷入了垃圾，然后移动了一些文件，只想发现我悄悄地破坏了几页生产。我认为更好的CI工具可以解决这个问题，但我也感觉到我宁愿避免冒险的风险。

保持视觉上一致。我最糟糕的是使用所有尺寸和amp;对我提供的颜色变体，我需要一个限制以避免制作不一致的怪物。

我的计划是在一个周末删除Tailwind，使用ranalize.css，CSS变量＆amp; MixIns，全部使用Postcs组合成单个CSS文件。

我已经开始将我的CSS转换为使用@apply来遵循BEM方法，所以我能够拿走我的CSS＆amp;将其分解为较小的文件。然后我经历了所有像间距，字体和amp这样的东西。我正在使用CSS变量的颜色。

我想尽可能靠近简单的香草CSS，原因是我在一个没有造型的项目中致力于在大约5年内触摸的项目，然后在我编辑stylees.css文件时...它刚改变了什么期待它。这是一个非常有趣的“哦？你会看那个！“类型经验。

显然，我喜欢一些低触摸工具来帮助减少重复。但我确实想瞄准一个码比在5年来的时候，它将容易地拾取。我认为最好的方法是使事情保持尽可能简单。

命名很难！对于我的字体＆amp;间距，我最终复制了使用编号的方法，这些方法通常用于尾风。

/ *变量/ fonts.css * /：root {--fonts-serif：ui-sans-serif，system-ui，-apple-system，blinkmacsystemfont，＆＃39; segoe ui＆＃39; ，Roboto，＆＃39; Helvetica neue＆＃39; ，arial，＆＃39; noto sans＆＃39; ，sans-serif，＆＃39;苹果颜色emoji＆＃39; ，＆＃39; segoe ui emoji＆＃39; ，＆＃39; segoe ui符号＆​​＃39; ，＆＃39; noto color emoji＆＃39; ; --font-size-1：0.75REM; --font-size-2：0.875REM; --font-size-3：1 rem; --font-size-4：1.125REM; --font-size-5：1.25REM; --font-size-6：1.5REM; --font-size-7：1.875REM; }

/ *变量/ spacing.css * /：root {--spacing-1：0.25REM; - 空间-2：0.5REM; - 划分-3：0.75REM; - 空间-4：1 rem; - 划分-5：1.25REM; - 空间-6：1.5REM; }

命名颜色是一个艰难的。我从来没有召唤变量“蓝色”的粉丝，然后使它变成蓝色。原因往往是未来的“蓝色”可能最终没有蓝色，这使事情变得凌乱。

相反，我复制了具有“初级”，“次级”＆amp的引导方式的方法。 “三级”颜色，但我明确地命名为暗示颜色旨在用作背景或文本。

/ *变量/ colours.css * /：root {--background-primary：＃3c2aaa; - Background - 中学：＃1D2938; - Background - 二级最轻：＃3F4A5B; - 留下次级光：＃232C39; - Background-Secondary-Dark：＃0F192C; - 留下 - TERTIAD：＃d0d5dc; - 贝卡 - Tertiary-Light：#ffffff; --text-primary：＃f9fafb; --text-初级更暗：＃a1a1ab; --link-primary：＃c5d1ff; --bord-primary：＃273241; }

我还添加了* -light＆amp; * -dark这些颜色的变化（用于在烤省＆amp; whatnot中使用），尽管我要回来并改善我选择的后缀。

理想情况下，我想实现使其他开发人员大声说出的变量名称“这是如此明显，我确切地知道这是为了”。如果有人有任何想法，请告诉我:)

我希望在构建响应设计时预先定义通用屏幕尺寸的方法。

要解决此问题，我使用PostCs-Preset-env，这使我可以使用名称定义“自定义介质” - 查看物 - LG和值（min-width：1024px）。由于PostCss-Preset-eng也支持嵌套的CSS，因此允许某些非常可读的CSS。

/ * Components / footer.css * / .footer {填充：var（ - 间隔-4）;填充底部：var（ - 间距-6）;文字对齐：中心; @Media（ - ViewPort-LG）{text-align：left;网格模板列：重复（2，minmax（0,1fr））; }}

很快我确实觉得我正在复制CSS＆amp;将实用程序类与我的HTML中的语义名为Classes混合。

/ * mixins / list-inline.css * / @ define-mixin列表 - 内联{list-style：none;边缘左：CACC（VAR（ - 间距-2）* -1）;边缘 - 右：Calc（var（ - spacing-2）* -1）;填充：0; ＆gt; li {显示：内联块;填充：0 var（ - 间距-2）; }}

/ *组件/ navbar.css * / / ** * @markup *＆lt; ul class =＆＃34; navbar__links＆＃34;＆gt; *＆lt;＆lt; l lt; href =＆＃34; /组＆＃34;＆gt;所有基团＆lt; / a＆gt;＆lt; / a＆gt; *＆lt;＆lt; href =＆＃34; /附加事件＆＃34;＆gt;添加事件＆lt; / a＆gt;＆lt; / a＆gt; *＆lt; / ul＆gt; * / .navbar__kinks {@mixin列表内联;边缘：0;边缘底：0;显示：无; @Media（ - ViewPort-MD）{显示：块;边缘 - 左：自动; }}

这允许我有语义寻找类名，其中包括普通的CSS片段，同时能够根据需要覆盖事物。它还让我潜力从我的CSS文件中的评论开始以编程方式生成样式指导，我对此感到非常兴奋。

当我的项目增长时，我发现我可以通过postcss-import-ext-glob导入文件，这使我的index.css文件更加可维护：

总的来说，我很满意这个CSS＆amp; HTML方法。我可以看一下HTML的片段，请参阅使用的CSS类＆amp;知道我需要编辑哪些文件以更改它们。我感觉非常掌控于我编写的CSS。

在审查我的新HTML＆amp时; CSS，我真的很喜欢，我并不再盯着CSS班名的墙。此外，如果我想对颜色，间距或字体进行任何更改，我觉得有信心我不需要更改大量文件来查看所需的视觉更改。相反，我可以打开变量/文件夹，然后打开一个适当命名的文件＆amp;只编辑几行CSS。

我也发现，生成的CSS的最终大小与以前相同，所以我很满意。

我确实来欣赏Tailwind在我的设计时拯救了多少时间（以及它如何让我在一个组件心态中思考更多），但我认为这也是一个非常锋利的工具，需要有很多学科有效使用 关于项目。 最后，我认为我仍然很乐意在基于尾行的项目上工作。 但是，我完全感到有点相信“我们可以使用CSS变量＆amp; 混合，如果我们想要的话“。