0

0

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

霞舞

霞舞

发布时间:2024-11-15 22:28:48

|

804人浏览过

|

来源于dev.to

转载

为什么我不喜欢使用 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]">
    <img ... />
</section>

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

关键见解

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

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

Magic AI Avatars
Magic AI Avatars

神奇的AI头像,获得200多个由AI制作的自定义头像。

下载

这样想吧。假设一个开发人员加入您的团队,他不懂 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。要了解更多信息,请阅读此公告。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

6208

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

492

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

240

2023.09.14

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

303

2023.09.21

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 42.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号