谈谈为什么我更倾向于不使用 elm-css-原创手记-慕课网

..., CSS Modules、CSS-in-JS 和 Tailwind，当我不受限制的时候。

我一直思考这个问题有一段时间了，但直到我看了Josh W. Comeau的演讲《如何教授CSS》（见https://www.joshwcomeau.com/）之后，才把这个问题明确表达出来。

我们来看一下乔什讲解一开始提到的这个问题。一个图片放在一个容器里，结果发现图片下面有一个奇怪的间隙。

一个有趣的观察是，无论使用JSX还是elm-html，问题依然存在。因此，这其实是一个HTML/CSS的问题。

我们可以解决这个问题，使用Josh找到的第一个解决方案，具体来说，可以给section元素设置line-height: 0。并且，将这个解决方案移植到elm-css、CSS Modules、CSS-in-JS和Tailwind中的相应代码也很简单。

比如说：使用 elm-css：

导入 Css
导入 Html.Styled 作为 H
导入 Html.Styled.Attributes 作为 HA

main =
    H.toUnstyled <|
        H.section
            [ HA.css [ Css.lineHeight (Css.px 0) ] ]
            [ H.img [ ... ] [] ]

进入全屏退出全屏

比如说用 Tailwind：

    <section class="leading-[0]">
        <img ... />
    </section>

全屏，退出全屏

好了，问题解决了。继续下一个问题。但等一下。正如 Josh 所说，深入理解问题后，你会发现那未必是最优的解决方式。这给了我一个关键的见解。

关键见解

所有这些抽象工具，如 elm-css、CSS Modules、CSS-in-JS、Tailwind 等，试图简化和抽象 CSS，但都未能成功，因为它们并没有改变你理解和处理样式问题的心理模型。它们确实使使用 CSS 更加方便，但当遇到样式难题时，那些对 CSS 工作原理理解不深的人会很难找到解决方法。

稍微退一步想一想。虽然你在用那些技术编写，但你实际上是用 CSS 的思维方式在思考。你必须这样做。这些技术在解决基本的样式问题上并没有什么帮助。你又是如何评判一个样式解决方案是否优于另一个呢？你必须理解网络哲学、HTML 的哲学和 CSS 的哲学。这不仅仅是技术层面的问题。也就是说，有一种做事的方法，有其背后的原因。

这么考虑。假设有一个开发者加入你的团队，虽然他们不懂CSS，但对Elm非常精通，甚至比Richard Feldman还要精通。你给他们一个使用elm-css进行样式的Elm视图，并且他们遇到一个将图片放入容器中的问题。类型思维能否帮助他们在解决这个问题上找到一个好的解决方案呢？我们在elm-css中写的line-height: 0的解决方案通过了类型检查器。elm-css没有引导我们找到更好的解决方案，因为它具有类型安全性。不，思考布局模式才是找到问题核心的关键。实际上，解决问题的唯一方法是通过CSS的思维方式，而不是依赖Elm。从根本上说，这实际上是一个CSS的问题。

尽管我们很想放弃CSS，但还是得学它。那elm-ui又如何呢？

elm-ui （一个Elm UI库）

elm-ui 改变了你的思维方式，因为在使用它时你不必考虑 HTML 和 CSS。这真是新颖，也很令人印象深刻。我提到的其他技术都没有做到这一点。我已经被说服了，我迫不及待要试试了。然而，它不符合网页的本质，与网页设计的原则相违背。它与网页的本质背离。

我对 elm-ui 的两个主要问题与它的僵化和divitis有关。归根结底，关键在于理解你所在的领域及其社区想要达成的目标。例如，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。不要陷入这种恶性循环。相反，学习 CSS。

订阅我的电子报

如果你有兴趣提高你的Elm技能，我邀请你订阅我的电子报，Elm with Dwayne。想了解更多，请阅读这篇帖子这篇公告。