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

例如顺风:

@@##@@

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

关键见解

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

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

随缘网络php企业网站管理系统2.0
随缘网络php企业网站管理系统2.0

随缘网络PHP企业网站管理系统V2.0正式发布,该企业网站管理系统采用PHP+MYSQL编写,界面色调风格延续之前1.0版管理系统简洁浅蓝色风格,稍有所变动。变更分类树形目录方式采用jquery库,产品,文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题,希望大家在使用中有什么问题可到本站论坛提出,我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服

下载

这样想吧。假设一个开发人员加入您的团队,他不懂 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

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

524

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

265

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

758

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

539

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

761

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

605

2023.08.10

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

561

2023.08.21

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

397

2023.08.22

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

1

2026.01.21

热门下载

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

精品课程

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

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 21.7万人学习

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

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