出于某种原因,我最近一直在思考进入网页设计行业和学习 CSS 需要什么。我估计这与 Keith Grant 本月初关于 CSS 心智模型 的帖子有关,他在帖子中谈到了“CSS 的通用核心”。
我们需要像这样的 CSS 通用核心技巧。不是旧意义上的“技巧”(比如如何伪造渐变边框),而是心智模式:在我们脑海中构建问题的方式,以便我们可以将问题分解成其组成部分并注意到重复出现的模式。那些深入理解这门语言的人在内心深处做到了这一点。我们需要开始着手提炼我们用于理解布局和定位以及使用相对单位的这些心智模式,以便我们可以将其传达给他人。
关于这一点,Rachel Andrew 也写了关于 如何学习 CSS 的文章,但在这种情况下,她更专注于技术的 CSS 细节。
对于大部分 CSS,您无需担心死记硬背属性和值。您可以在需要时查找它们。但是,语言有一些关键的基础,没有它们,您将难以理解它。确实值得花一些时间确保您理解这些内容,因为从长远来看,这将为您节省大量时间和挫败感。
这与 Andy Bell 的 “CSS 并不糟糕” 论点完美契合。Andy 说,也许人们如此频繁地攻击 CSS 的原因是他们根本不理解它,因此不尊重它为何以这种方式工作。
花这么多时间为网络三驾马车之一的 CSS 进行辩护,这让我感到筋疲力尽。它应该与 HTML 和 JavaScript 平等,以创建可访问的、渐进增强的网站和 Web 应用程序,帮助每个人实现他们需要实现的目标。
当我阅读这些以及其他文章时,我忍不住思考我会给一个对网页设计和 CSS 感兴趣的新手开发者什么建议——我会建议他们从哪里开始?内容如此之多,仅仅想到它就让我头疼。
就我个人而言,我通常从 HTML 的基础知识开始,然后慢慢向人们介绍像 color
或 font-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 的最佳资源是什么?请在下面的评论中告诉我们!
说“CSS 的通用核心”可能是一个错误,因为通用核心因其对像数学和技术思维这样的硬技能的“方法胜于结果”的意识形态而受到彻底嘲笑;优秀的 CSS 代码编写者需要具备这些能力才能编写出好的代码。
此外,请注意,当我教授 CSS 时,我从盒模型开始。字体系列和颜色并不像盒模型那样重要。
我同意,这实际上是一个不错的起点!我也这样做。如果不理解盒模型,就会一团糟哈哈
嗯,我同意盒模型非常重要。实际上,它是使用任何布局或使用 CSS 执行更基本操作的基础。
显然,这是非常主观的,但我已经教授 CSS 多年了,我同意文章关于从排版开始并继续进行的观点。
这让人们在开始使用盒模型、Flexbox 和现在的 Grid 等复杂概念之前,对这门语言有一些了解。
“比如为我的高中乐队创建一个网站——不,我会告诉你它的名字”
那么叫什么呢?
CSS-Ticks 是学习 CSS 技术的绝佳场所。Codepen.io 和 scrimba 也不错。
很棒的建议。如果您不想为 RSS 阅读器付费,可以使用 Feedly,它是免费的。
在过去学习 CSS 的时候,我很难理解什么可以用 CSS 实现,什么不能。
当时 CSS3 还没有出现,也没有像 Less 或 Sass 这样的预处理器或像 PostCSS 这样的后处理器。
我当时脑海中想到的是,所有东西都是正方形——一个盒子——这些盒子可以一个接一个地出现,一个挨着一个地出现,或者分层,一个叠在一个上面。当我浏览网站时,即使某些东西看起来很花哨,我也认为它实际上是一组盒子,我只是在考虑如何仅使用正方形来复制这种效果,并给用户一种错觉,例如它实际上具有圆角。
这种思维方式对我帮助很大。突然之间,我只需要记住盒模型和这些“盒子”的一堆属性。然后我继续学习定位等,并一步一步地进行。
在让初级开发人员尝试在没有它们的情况下构建布局之前,我甚至不会跳到 Flexbox 或 Grid 等布局,这样他们就可以看到差异以及它们解决了哪些问题。
最大的问题可能是,您需要一些基本知识才能理解当今的许多博客文章。当您想理解一件事却不得不查找太多其他事情时,可能会(也许)非常令人沮丧。
但最终我完全同意你的观点。阅读关于 CSS 的文章是学习它的最佳方式。
嘿,Chris!我也开始了一个类似的开发者博客列表
https://github.com/endymion1818/awesome-developer-blogs/
我的本意是,在遇到每个人的博客时都将其列出来,以便日后能够回访(即使他们不提供 RSS),并鼓励我们继续发布到自己的博客上,而不是像 Medium 这样的托管平台。
我希望它能补充 Stu 已经非常棒的列表。
感谢你的建议。我再怎么强调实践学习的重要性(即阅读文章)也不为过。我之前使用 Twitter 搜索很棒的资源,但我将尝试你建议的新方法,使用 RSS 阅读器。