我收到了一封电子邮件,内容如下(为了可读性略作编辑)
CSS 让我难过。
我已经编写了十多年的 Web 应用程序。我可以设计架构,加载所有必需的数据,进行所有跳转和跳跃,直到我拥有一个包含相关信息的完美制作的标记。
然后,我需要将一个框放在另一个框的左侧。或者添加一个滚动条,因为列表太大。或者,天哪,居中一些文本。
我浪费了几个小时,感觉毫无价值,很悲伤。这 只 发生在 CSS 中。
我认为这是一个练习的问题。我敢打赌,你练习构建网站所涉及的所有其他技术,比练习 CSS 多。如果有什么安慰的话,有很多开发人员的感觉正好相反。设计、样式化和进行 Web 布局对他们来说很容易,相比之下,设计数据架构就难了。
我怀疑 CSS 本质上很糟糕,设计得很糟糕,以至于非常聪明的人无法处理它。如果有一种方法可以衡量它,我可能会把我的钱押在 CSS 上,认为它是更容易掌握的语言之一,只要练习时间相同。
事实上,Eric Meyer 最近出版了 CSS: The Definitive Guide, 第 4 版,它的厚度是第一版的两倍多,但它说
CSS 的功能比以往任何时候都多,这是真的。从“潜在的知识量”的角度来说,是的,CSS 更加具有挑战性。
但是核心原则和机制并不比十年前甚至二十年前更复杂。如果有什么不同的话,它们现在更容易掌握,因为我们不必用浮动行为或内联布局来杂乱我们的思路,仅仅是为了尝试布局一个页面。
一种消化它的方式可能是:如果你对过去的 CSS 感到沮丧,现在是尝试它的时候了,因为它变得更加强大,而且我敢说,也更容易了。
我们也可以逐一解决你的具体情况
然后,我需要将一个框放在另一个框的左侧。
试试 flexbox!
查看 CodePen 上 Chris Coyier (@chriscoyier) 的 GyZMrj。
或者添加一个滚动条,因为列表太大。
或者,天哪,居中一些文本。
overflow
属性非常适合处理滚动条问题。你甚至可以 设置它们的样式。我们还有一个关于 居中的完整指南!这是一个双重目的的例子
查看 CodePen 上 Chris Coyier (@chriscoyier) 的 居中滚动列表。
祝你好运!
我渴望在 Firefox 中设置滚动条样式。不能做到这一点让 我 感到难过。
作为一名“后端开发人员”,我一直有同样的感觉。我们总是害怕参与网站设计,并且真正使用 CSS 来实现特定的效果,直到我被“强迫”独自完成一个重量级的前端项目,然后我开始喜欢它……现在我花了几月时间使用它并进行了一些错误修复,现在我可以最终地说“它并不像我想象的那么糟糕”。
我认为 CSS 的底层概念(声明式语法、级联、选择器、媒体查询)非常好,设计得也很好。但是很长一段时间我们没有合适的工具来进行块级和页面布局。但随着 flexbox、grid 和即将推出的盒子对齐模块等技术的出现,我们正在接近目标。终于。
五年前,他会完全正确。设计师必须记住一系列不直观的技巧才能布局页面。如今,我们有了 Flexbox,它完全逻辑,易于使用。
只有在你 专门 使用它 的情况下。否则它会很快变得难看。
而且,由于许多网站仍然使用传统的基于浮动的网格构建,没有人有时间一遍又一遍地完全重新发明轮子,这种情况还会持续一段时间。
cu, w0lf。
“我认为这是一个练习的问题。”——我完全同意。我是一个觉得 CSS 很“容易”的人。当然……有时它不按预期工作,我不得不努力让复杂的布局正确。但是 CSS 是我的舒适区。我写 PHP,我写 javascript……我对这样的编码和脚本编写有一定的舒适感。但我认为我更像一个“HTML 和 CSS 专家,也做一些其他事情”。更像一个“设计师/开发者”,而不是一个“开发者/设计师”,如果我们可以在头衔上斤斤计较的话。
有趣的是,我曾与一些硬核后端程序员共事,他们对自己的 CSS 能力有不同的看法。有些人认为,“CSS 很容易,我是全栈工程师,我可以做任何事情,尤其是像 CSS 这样简单的东西”,同时,他们并不真正了解级联和特异性以及诸如此类的原理。他们 低估 了需要学习的知识量。而另一些人则过高地估计了它的难度,说:“我可以完全通过任何代码库来控制数据库,但我对你们如何让它看起来很好感到敬畏,我 永远 无法做到。”
我认为真相介于两者之间,这确实取决于你最常做什么以及你的优势在哪里。
但我认为这是件好事。我的编程伙伴和我会互相帮助。“嘿,我做到了这一步,但我无法让这个数组返回正确的字符串;你能帮帮我吗?”“当然,但我无法让这部分内容与它右侧的内容对齐,你能帮帮我吗?”
你关于 CSS 居中的指南恰好展现了 CSS 的问题。
我们想要将一个元素居中放置在另一个元素中,
这是一个简单而 基本 的要求,应该很简单,
但在 CSS 中却不是这样。
在你的指南中,有 12 种不同的情况(如果我算对了),在大多数情况下,你必须绕弯子,使用复杂且难以维护的代码……
CSS 可能是 一种语言,但对于只想布局他们元素的用户来说,它太复杂了。
Nadav