为什么我不喜欢使用 elm-css

…、css 模块、css-in-JS 和 tailwind（当我不受限制时）。

我已经思考这个问题很长一段时间了，但一直无法清楚地表达出来，直到我看了 josh w. comeau 的演讲“how to teach css”。

让我们以乔希开始演讲的问题为例。我们有一个图像放在容器中，结果发现图像下方有一个奇怪的间隙。

值得注意的一个有趣的事情是，即使我们使用 jsx 或 elm-html 编写问题仍然存在。所以这从根本上来说是一个 html/css 问题。

立即学习“前端免费学习笔记（深入）”；

我们可以使用 josh 找到的第一个解决方案来修复它，特别是在部分元素上使用 line-height: 0 。而且，很容易将该解决方案转换为 elm-css、css modules、css-in-js 和 tailwind 中的相应解决方案。

例如使用 elm-css:

import css import html.styled as h import html.styled.attributes as ha  main =     h.tounstyled <|         h.section             [ ha.css [ css.lineheight (css.px 0) ] ]             [ h.img [ ... ] [] ] 

例如顺风：

<section class="leading-[0]">     @@##@@ </section> 

太好了，问题解决了。继续下一步。但是等等。正如乔什正确指出的那样，当您深入了解问题时，您就会意识到这不是解决问题的最佳方法。这让我有了一个重要的见解。

关键见解

所有这些抽象，elm-css、css 模块、css-in-js、tailwind 等，试图抽象掉 css，但都失败了，因为它们不会改变思维模型你必须用来推理造型问题。它们确实让 css 的使用变得很方便，但是当出现样式问题时，不深入了解 css 工作原理的人将很难找到解决方案。

退后一步想一想。你用这些技术来编写，但你用 css 来思考。你必须这样做。这些技术在解决基本的造型问题时没有任何价值。您如何决定一种造型解决方案何时优于另一种。你必须了解网络的哲学、html 的哲学、css 的哲学。这并不全是技术性的。做事有方法，也有原因。

这样想吧。假设一个开发人员加入您的团队，他不懂 css，但在 elm 方面是专家，你知道，比 richard feldman 更好。您给他们一个 elm 视图，该视图使用 elm-css 进行样式设置，并且图像位于容器问题中。类型思考能否帮助他们找到问题的良好解决方案？我们在上面的 elm-css 中编写的 line-height: 0 解决方案通过了类型检查器。 elm-css 并没有给我们带来更好的解决方案，因为它是类型安全的。不，它正在考虑布局模式，以找到问题的根源并最终得出更好的解决方案。实现这一目标的唯一方法是用 css 思考，而不是用 elm 思考。这从根本上来说是一个 css 问题。

尽管我们很想放弃 css，但我们仍然需要学习它。但是 elm-ui 呢？

elm-ui

elm-ui 改变了你的心理模型，因为使用它时你永远不必考虑 html 和 css。这很新颖。这令人印象深刻。我提到的其他技术都无法做到这一点。给我报名吧，我被卖了。然而，它不适合网络。它违背了网络的规律。

我对 elm-ui 的两个主要问题与僵化和分歧有关。这又回到了理解你正在工作的领域的哲学以及整个社区试图实现的目标。例如elm-ui 可能非常适合本机桌面应用程序。但是，在网络上，流动性和可访问性太受重视。

考虑到这种情况，你能看出人们会如何判断这个按钮是一种可怕的网络按钮实现方式吗？请尝试理解我在说什么。这不是一个技术问题，而是一个哲学问题。该按钮不灵活且无法访问。

那么为什么我不喜欢使用 elm-css 等呢？

简单。它们为你提供了更多的抽象，但收获却很少。我很早之前就花时间学习css了。我不是专家，但我可以使用 bem 和一些实用程序类。

事情是这样的。如果项目需要，我可以立即掌握任何其他技术，因为我知道如何用 css 进行思考。这些其他技术只是帮助您以不同的方式编写 css。是的，我知道他们解决的问题是真正的问题，但是，特别是近年来，有非常好的替代纯 css 解决方案。

css 不会消失。如果您计划长期构建网站和 web 应用程序，那么花时间深入了解 css 是一笔巨大的投资。

结论

elm-css、css modules、css-in-js、tailwind 等都是很棒的技术。不幸的是，它们并不能免除您学习和深入理解 css 的需要。如果您已经熟练掌握 css，那么请务必继续使用这些技术，因为它们有时很方便，尤其是 tailwind，它可以轻松制作 ui 原型。但是，如果您很难使用 css 并且暗地里不喜欢它，只需知道您可能正在将样式与代码放在一起编写并避免特殊性，但 css 仍然会出现在您的脑海中。只是你对 css 的心理模型太弱了，以至于你遇到的每一个基本样式问题只会让你更加讨厌 css。不要陷入那个螺旋。相反，学习 css。

订阅我的时事通讯

如果您有兴趣提高 elm 技能，那么我邀请您订阅我的时事通讯 elm with dwayne。要了解更多信息，请阅读此公告。