把你的皱眉变成微笑

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为你旅途的每个阶段提供云产品。立即开始使用 价值 200 美元的免费信用额度!

我收到了一封电子邮件,内容如下(为了可读性略作编辑)

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) 的 居中滚动列表

祝你好运!