学习 CSS 的秘密武器

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

出于某种原因,我最近一直在思考进入网页设计行业和学习 CSS 需要什么。我估计这与 Keith Grant 本月初关于 CSS 心智模型 的帖子有关,他在帖子中谈到了“CSS 的通用核心”。

我们需要像这样的 CSS 通用核心技巧。不是旧意义上的“技巧”(比如如何伪造渐变边框),而是心智模式:在我们脑海中构建问题的方式,以便我们可以将问题分解成其组成部分并注意到重复出现的模式。那些深入理解这门语言的人在内心深处做到了这一点。我们需要开始着手提炼我们用于理解布局和定位以及使用相对单位的这些心智模式,以便我们可以将其传达给他人。

关于这一点,Rachel Andrew 也写了关于 如何学习 CSS 的文章,但在这种情况下,她更专注于技术的 CSS 细节。

对于大部分 CSS,您无需担心死记硬背属性和值。您可以在需要时查找它们。但是,语言有一些关键的基础,没有它们,您将难以理解它。确实值得花一些时间确保您理解这些内容,因为从长远来看,这将为您节省大量时间和挫败感。

这与 Andy Bell 的 “CSS 并不糟糕” 论点完美契合。Andy 说,也许人们如此频繁地攻击 CSS 的原因是他们根本不理解它,因此不尊重它为何以这种方式工作。

花这么多时间为网络三驾马车之一的 CSS 进行辩护,这让我感到筋疲力尽。它应该与 HTML 和 JavaScript 平等,以创建可访问的、渐进增强的网站和 Web 应用程序,帮助每个人实现他们需要实现的目标。

当我阅读这些以及其他文章时,我忍不住思考我会给一个对网页设计和 CSS 感兴趣的新手开发者什么建议——我会建议他们从哪里开始?内容如此之多,仅仅想到它就让我头疼。


就我个人而言,我通常从 HTML 的基础知识开始,然后慢慢向人们介绍像 colorfont-family 这样的 CSS 属性。但这种建议通常只有在你坐在某人旁边并且有时间解释 HTML 和 CSS 的所有内容时才有用:如何布局页面,如何处理性能,如何考虑渐进增强等。仅这些主题就值得举办一个为期一个月的研讨会——而这仅仅是开始!

那么从哪里开始呢?**什么样的建议才能从长远来看帮助学生?**


我在这个行业中的经历可能与许多其他网页设计师的经历相符:我没有为此上过学。我一边自己摸索,一边使用 CSS-Tricks 和 Smashing Magazine 等参考网站来填补空白。我会从一个项目开始(比如为我的高中乐队创建一个网站——不,我会告诉你它的名字),在这个过程中,我会杂乱无章地学习排版、Sass、构建工具,以及可访问的手写标记。

听我说,我认为学习网页设计行业的**最佳**方式并不是学习最新的花哨玩意儿或小部件。是的,你最终必须做到这一点。或者也可能不需要。在某个时刻,牢牢掌握 Flexbox 和 Grid 并记住一些属性是一件好事。但我想教网页设计师钓鱼,并确保他们能够为未来做好准备。而寻找 CSS 的最佳方法可能不会出现在某本书或课堂课程中。相反,我认为最好推荐其他东西。

我的建议可以用四个字概括:**使用 RSS 阅读器。**

思考之后,我发现我能给出的最有用的建议是参与社区——对我来说,这是通过 RSS 实现的。找到大量的博客并订阅它们。随着时间的推移,您不仅会了解这门手艺,而且还会获得大量(并且希望是有条理的)资源,这些资源涵盖基础知识、技巧、标准、个人挣扎和新闻,以及许多其他内容。


这仍然是我今天学习网页设计的方式。RSS 是我帮助我继续学习网络的最重要的工具——从使用微小的 CSS 属性到巨大的框架。当然,Twitter 是一个快速学习(甚至与之建立联系)网页设计行业重量级人物的好地方,但没有比 RSS 更好的技术可以让你不断了解人们对 CSS 和 Web 开发的思考方式。

因此,我鼓励您(是的,**您**)如果您还没有 RSS 阅读器,就获取一个,或者如果已经有一段时间了,就重新启用您现有的 RSS 阅读器。我在 OSX 和 iOS 上使用 Reeder 3 并将其与 Feedbin 配对。然后,订阅大量博客或关注 Twitter 上的很多人以找到他们的网站。那里不乏材料或来源!

这听起来像是件很傻的事,但让自己融入网页设计社区比学习任何炫酷的 CSS 技巧都重要。您将创建一个环境,让您能够不断学习未来所需的新事物。我保证,一旦你开始,找到关心 Web 开发并最终学习 CSS 的人,并不像你独自一人时那样令人生畏。


您应该订阅哪些网站?好吧,Stuart Robson 创建了一个 很棒的列表,列出了他通过 RSS 订阅的所有网站——您应该能够下载该文件并将其直接放入您的 RSS 阅读器中。此外,Rachel Andrew 在询问 CSS 发生了什么 时,也创建了一个很棒的网站列表。当然,我们自己的时事通讯 本周的网页设计与开发 当然也是一个不错的起点。说到电子邮件和时事通讯——Umar Hansa 的 Dev Tips 也是另一个很棒的资源,我不断从中学到关于 Chrome DevTools 的新东西。

不过,您喜欢哪些网站?保持了解 CSS 的最佳资源是什么?请在下面的评论中告诉我们!