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

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

例如顺风:

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

关键见解

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

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

软件公司中文网站模板 软件公司中文网站模板

这款DIV+CSS简单漂亮的软件公司中文网站模板是别人找我们做的,后来因为做完了后,他们拿到模板后,迟迟不肯把钱付清,就拿出来跟大家一起分享一下,希望大家喜欢这款DIV+CSS的中文模板。全套模板,包含亿贝首页、亿贝CALl、亿贝通讯录、软件下载、最新动态、留言板、用户中心、帮助中心等网站模板页面。

软件公司中文网站模板 65 查看详情 软件公司中文网站模板

这样想吧。假设一个开发人员加入您的团队,他不懂 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的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1152068.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
拳头官宣:《英雄联盟》S15冠亚军决赛落地成都!
上一篇 2025年12月2日 20:26:13
winrar怎么分卷-winrar分卷的方法
下一篇 2025年12月2日 20:26:21

相关推荐

  • mysql如何输入注释 mysql写sql代码的格式规范

    mysql如何输入注释 mysql写sql代码的格式规范mysql如何输入注释 mysql写sql代码的格式规范mysql如何输入注释 mysql写sql代码的格式规范mysql如何输入注释 mysql写sql代码的格式规范

    在mysql中,单行注释使用–(后跟空格)或#,多行注释使用/*…*/。1. 注释应解释“为什么”而非“是什么”,单行注释推荐使用–,#常用于脚本开头;2. 多行注释适用于复杂逻辑说明或版权信息;3. sql格式规范包括关键词大写、统一缩进、合理换行与逗号放置,以…

    2026年9月23日 用户投稿
    400
  • CodeIgniter 4 API:捕获并返回HTTP响应中的错误

    在使用CodeIgniter 4构建API服务时,我们经常需要处理各种异常情况。默认情况下,CodeIgniter 4会将错误信息记录到日志文件中,但不会直接将其返回到HTTP响应中。这导致我们需要频繁地查看日志文件来排查问题,效率较低。为了解决这个问题,我们可以通过修改配置文件,将错误信息直接暴露…

    2026年9月23日
    000
  • safari浏览器如何开启画中画模式播放视频_safari浏览器画中画模式开启方法

    如果您在观看网页视频时希望同时进行其他操作,可以启用 Safari 浏览器的画中画模式,让视频以浮动小窗形式继续播放。此功能支持大多数主流视频网站,如 YouTube、优酷等。 本文运行环境:MacBook Air,macOS Sonoma 一、通过视频右键菜单开启画中画 此方法适用于正在播放的视频…

    2026年9月23日
    000
  • FlexClip如何用于在线AI视频制作?快速创建云端AI视频的技巧

    FlexClip如何用于在线AI视频制作?快速创建云端AI视频的技巧FlexClip如何用于在线AI视频制作?快速创建云端AI视频的技巧FlexClip如何用于在线AI视频制作?快速创建云端AI视频的技巧FlexClip如何用于在线AI视频制作?快速创建云端AI视频的技巧

    FlexClip通过AI脚本生成、文本转视频、AI配音与图片生成等智能工具,实现从文案到成片的高效制作。其亮点在于一站式云端操作、强大内容生成力、素材库丰富、易用性与专业性兼备。用户可通过个性化修改、原创素材融入、精细剪辑及多轮迭代提升视频独特性,同时应对AI理解偏差、素材同质化、情感表达局限等挑战…

    2026年9月23日 用户投稿
    000
  • mysql怎么添加降序索引 mysql创建排序索引的语法详解

    mysql怎么添加降序索引 mysql创建排序索引的语法详解mysql怎么添加降序索引 mysql创建排序索引的语法详解mysql怎么添加降序索引 mysql创建排序索引的语法详解mysql怎么添加降序索引 mysql创建排序索引的语法详解

    mysql从8.0版本开始支持降序索引,通过在列名后添加desc关键字创建,例如create index idx_order_date_desc on orders (order_date desc);。1. 降序索引优化了order by column desc查询的性能,避免文件排序;2. 升序…

    2026年9月23日 用户投稿
    100
  • Java中使用栈验证JSON字符串结构:深入理解与实践

    本文探讨了在Java中利用栈验证JSON字符串结构的核心原理与常见陷阱。我们将分析一种初始实现中处理引号、转义字符及字符串内部结构字符的不足,并提供一个更健壮的栈基方法,以准确判断JSON的括号、方括号和引号是否平衡,同时纠正关于不完整JSON片段有效性的常见误解。 1. JSON结构与验证的重要性…

    2026年9月23日
    100
  • mysql索引类型有哪些 mysql创建不同索引的方法对比

    mysql索引类型有哪些 mysql创建不同索引的方法对比mysql索引类型有哪些 mysql创建不同索引的方法对比mysql索引类型有哪些 mysql创建不同索引的方法对比mysql索引类型有哪些 mysql创建不同索引的方法对比

    mysql支持多种索引类型,选择合适的索引类型可提升数据库性能。1.b-tree索引适用于等值、范围查询和排序,是innodb和myisam的默认索引;2.hash索引仅适合等值查询,不支持范围和排序,memory引擎支持显式创建;3.fulltext索引用于文本搜索,适合关键词查找;4.空间索引(…

    2026年9月23日 用户投稿
    000
  • Tableau的AI混合工具如何操作?生成智能数据可视化的实用指南

    Tableau的AI混合工具通过自然语言查询、自动解释和预测模型,降低数据分析门槛,帮助非技术用户快速获取洞察。首先,Ask Data支持用日常语言提问,自动生成可视化图表,显著提升数据探索效率;其次,Explain Data利用机器学习分析异常点,揭示潜在影响因素,将“是什么”转化为“为什么”;再…

    2026年9月23日
    000
  • mysql安装完成如何事件 mysql定时任务设置教程

    mysql安装完成如何事件 mysql定时任务设置教程mysql安装完成如何事件 mysql定时任务设置教程mysql安装完成如何事件 mysql定时任务设置教程mysql安装完成如何事件 mysql定时任务设置教程

    要使用mysql的事件调度器设置定时任务,首先需开启事件调度器,其次创建定时事件,再查看管理事件,最后注意权限与时间格式等问题。具体步骤如下:1. 开启事件调度器:通过命令或配置文件启用;2. 创建事件:使用create event定义执行频率与sql操作;3. 管理事件:可查看、修改或删除已有事件…

    2026年9月23日 用户投稿
    100
  • OpenAI 与微软达成重磅交易:股权结构再变,投资者面临稀释风险

    据《金融时报》披露,OpenAI 近期完成了一系列关键性交易,使其股权架构日趋复杂,同时也加剧了投资者对未来收益前景的担忧。在这些新协议推动下,OpenAI 的估值已飙升至5000亿美元,跃居全球最具价值的未上市企业之列。这一惊人估值的背后,是公司与英伟达和AMD两家芯片巨头达成的数十亿美元合作协议…

    2026年9月23日
    000
  • 抖音短视频被系统判定违规怎么办 抖音内容管理与违规申诉方法

    先明确违规原因,再通过APP申诉并提交原创或授权证据,必要时邮件、电话多渠道沟通,确保材料真实完整。 抖音视频被系统判定违规,先别急着申诉,关键是要搞清楚为什么会被判。平台的审核机制有时会出现误判,但也可能是内容确实踩了红线。处理的核心是精准定位问题、准备充分证据、通过正确渠道沟通。下面分几步说明怎…

    2026年9月23日
    300
  • NS2版《无主之地4》突遭延期!预购将取消

    《无主之地4》现可提前购入,使用金币叠加限时优惠券后,标准版仅需244.5元(共节省 ¥53.5);超级豪华版为457.4元(总计优惠 ¥100.6)。 原计划于10月3日发布的《无主之地4》Nintendo Switch 2版本已确认延期。Gearbox Entertainment最新发布公告称,…

    2026年9月23日
    200
  • 如何在mysql中优化多表JOIN查询

    答案:优化MySQL多表JOIN需创建关联字段索引、提前过滤数据、选择合适JOIN类型与表序、利用EXPLAIN分析执行计划,并定期更新统计信息以提升查询效率。 在MySQL中优化多表JOIN查询,关键在于减少数据扫描量、提升连接效率,并合理利用索引和执行计划。以下是一些实用的优化策略。 1. 确保…

    2026年9月23日
    300
  • WooCommerce 购物车联动:实现赠品自动添加与移除的专业指南

    本文提供了一份关于在 woocommerce 中实现自动赠品系统的全面指南。它解决了在程序化添加产品时常见的 `woocommerce_add_to_cart` 递归问题,并提供了一个使用自定义购物车项元数据来管理关联赠品的健壮解决方案,确保赠品能与特定主产品同步添加和移除。 引言 在电子商务中,为…

    2026年9月23日
    500
  • Java Web项目在无Maven/Eclipse环境下生成WAR包的实践指南

    本文详细介绍了如何在没有Maven或Eclipse等集成开发环境或构建工具的情况下,为Java Web项目手动或通过Apache Ant工具生成WAR文件。教程涵盖了WAR文件的基本结构、使用Ant进行编译和打包的具体步骤,并提供了Ant构建脚本示例,旨在帮助开发者理解并实践WAR包的独立构建过程。…

    2026年9月23日
    100
  • MySQL安装需要哪些硬件配置要求?

    MySQL安装需要哪些硬件配置要求?MySQL安装需要哪些硬件配置要求?MySQL安装需要哪些硬件配置要求?MySQL安装需要哪些硬件配置要求?

    mysql的硬件配置需根据应用场景和负载决定,生产环境应重点考虑磁盘i/o、内存、cpu和网络。1. cpu:oltp场景多核心更重要,olap则更依赖主频和缓存;2. 内存:buffer pool越大越好,但需避免过度分配导致swap使用;3. 磁盘i/o:ssd是标配,nvme ssd和raid…

    2026年9月23日 用户投稿
    200
  • PHP教程:解析和访问包含JSON字符串的数组值

    本教程旨在指导读者如何高效地从PHP数组中提取数据,特别是当数组的每个元素都是一个JSON格式的字符串时。文章将详细介绍如何利用json_decode()函数将JSON字符串转换为PHP数组,并通过示例代码演示循环遍历和直接访问特定字段的方法,帮助您轻松处理此类复杂数据结构。 理解数据结构 在php…

    2026年9月23日
    200
  • 如何在Procreate中使用AI导出图片?保存高质量图像的正确方法

    Procreate无内置AI导出功能,但可通过导出高质量图像(如PSD、TIFF、PNG)供外部AI工具优化;选择格式需根据用途,PSD适合协作,TIFF用于印刷,PNG支持透明背景,JPEG慎用以避免压缩损失;画布应高DPI创建,色彩配置优先sRGB,印刷时后期转CMYK更精准。 ☞☞☞AI 智能…

    2026年9月23日
    100
  • 视频号新号直播扶持几天?视频号怎么做才有流量

    近年来,随着视频号平台的不断壮大,越来越多的人开始将目光投向这一新兴领域。为了吸引优质创作者加入,视频号推出了针对新注册账号的直播扶持计划。本文将带您深入了解这项扶持政策,并提供实用建议,帮助您快速提升影响力。 一、视频号直播扶持政策详解 1. 政策背景 该扶持政策是视频号顺应国家推动数字经济发展、…

    2026年9月23日
    400
  • VSCode极速配置Scala:sbt支持、中文文档、REPL集成

    安装JDK和sbt后,在VSCode中安装Metals扩展,即可快速搭建Scala开发环境;2. Metals通过LSP和BSP协议实现代码补全、错误检查、重构及sbt项目自动导入;3. 支持通过sbt shell启动REPL或使用Run Worksheet实现交互式编程;4. 虽无内置中文文档,但…

    2026年9月23日
    100

发表回复

登录后才能评论
关注微信