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

wufei123 2025-01-26 阅读:50 评论:0
...、css 模块、css-in-js 和 tailwind(当我不受限制时)。 我已经思考这个问题很长一段时间了,但一直无法清楚地表达出来,直到我看了 josh w. comeau 的演讲“how to teach css”。 让...

为什么我不喜欢使用 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:

PHP
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 [ ... ] [] ]

例如顺风:

PHP
<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。要了解更多信息,请阅读此公告。

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

以上就是为什么我不喜欢使用 elm-css的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

    BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
    知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
  • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

    闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
    闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
  • python怎么调用其他文件函数

    python怎么调用其他文件函数
    在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...
  • 俄罗斯引擎yandex入口官网地址 yandex网址在线免费进入(俄罗斯.官网.在线免费.入口.地址......)

    俄罗斯引擎yandex入口官网地址 yandex网址在线免费进入(俄罗斯.官网.在线免费.入口.地址......)
    俄罗斯引擎yandex官网地址入口在哪里?这是不少网友都关注的问题,接下来由php小编为大家带来yandex网址在线免费进入,感兴趣的网友一起随小编来瞧瞧吧! 俄罗斯引擎yandex入口官网地址 1、俄罗斯引擎yandex入口官网地址☜☜☜☜☜点击进入 2、yandex网址在线免费进入☜☜☜☜☜点击进入 【俄罗斯引擎yandex】 1、Yandex的搜索引擎在俄罗斯拥有极高的市场份额,其算法针对俄语和斯拉夫语系进行了优化,能更好地理解用户意图,提供更精准的搜索结果。它不仅...
  • 斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)

    斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)
    斗魔骑士角色选择及战斗策略指南 斗魔骑士游戏中,众多角色各具特色,选择适合自己的角色才能在战斗中占据优势。本文将为您详细解读如何选择强力角色,并提供团队协作及角色培养策略。 如何选择强力角色? 斗魔骑士的角色大致分为近战和远程两种类型。近战角色通常拥有高攻击力和防御力,适合冲锋陷阵;远程角色则擅长后方输出,并依靠灵活走位躲避攻击。 选择角色时,需根据个人游戏风格和喜好决定。喜欢正面硬刚的玩家可以选择战士型角色,其高生命值和防御力能承受更多伤害;偏好策略性玩法的玩家则可以选择法...