技术社区推荐的 CSS 资源

昨天我在“设计+代码”上推出了我的第一门课程“CSS 布局和动画”。

我请 Twitter 上的人们分享他们最喜欢的 CSS 资源。

过去三年我经常使用 CSS，惊讶地发现竟然有这么多我以前从未见过的资源。以下是技术社区分享的资源列表。

我以前没见过的：

Bjørn Fjellstad 在Dribble和Instagram上发布的每日 CSS 设计，
这是一个精彩的 CSS 灵感合集。Bjørn 的目标是一年内每天创作一个设计。

Cody House 的Twitter 账号是 @codywebhouse。
这是一个 CSS 框架，包含可访问的 HTML、CSS 和 JavaScript 组件库。网站上有一些很棒的文档和示例。

Jeremy Thomas在 Twitter 上@jgthms发布了css-reference.io。
这是一个关于 CSS 的全面参考资料，有很多很棒的视觉效果。

CSS 速查表，作者 Adam Marsden @AdamMarsdenUK，发布于 Twitter。CSS
优秀内容的参考资料。

GitHub 上atomiks的30 秒 CSS 教程
。 精选了一些实用的 CSS 代码片段，30 秒内就能看懂。

最受欢迎的资源

目前最受欢迎的是 CSS-Tricks 和 Mozilla 开发者网络（MDN）

CSS-Tricks
CSS-Tricks 已经存在很长时间了，并且对于您能想到的有关 CSS 和前端的几乎所有内容来说都是一个很好的资源。

MDN 的 Web 文档
MDN 提供大多数与 Web 技术相关的参考指南。网站上有指南、教程和学习路径。

提及更多优秀资源

CodePen
我最喜欢的工具之一，我在课程中经常使用。CodePen 就像开发者版的 Dribbble。它是一款面向任何技能水平的设计师和开发者的在线代码编辑器，尤其能帮助编程初学者。

Twitter 上@js_tut的CSS 视觉词典
包含超过 250 个视觉图表，解释了当前所有主流浏览器支持的所有 CSS 属性和值。

Greg 在网上有很多很棒的资源，他经常免费与社区分享。你可以在 Twitter 上关注他，了解他的最新动态。

Sarah Drasner @sarah_edo在 Twitter 上发布了CSS 网格生成器
。这是一个小型可视化工具，可以为您生成 CSS 网格代码。您可以指定行、列、间距和单位，然后拖动创建子 div，轻松实现动态布局。

Twitter 上@playcodepip发布的Flexbox Froggy
是一个游戏化学习的网站。Flexbox Froggy 是一款游戏，玩家可以通过编写 CSS 代码来帮助 Froggy 和朋友们。

Codrops @codrops在 Twitter 上
一个致力于为网页设计师和开发人员提供有用的教程、有见地的文章、创作灵感和免费资源的网站。

他们还有一个代码游乐场，其中有与 Web 开发和编程相关的实验、插件和文章。

FreeCodeCamp FreeCodeCamp 是一个非营利组织，致力于帮助数百万人免费学习编程。课程中有几个部分专门针对 CSS。

Lea Verou是一位非常值得在 Twitter 上关注的励志人物。她拥有丰富的知识，包括她在《CSS 秘诀》一书中分享的内容。

Rachel Andrew，如果你对 CSS 网格感兴趣，就应该关注 Rachel。可以看看她的网站Grid By Example。

如果你喜欢网格布局或网页布局， Jen Simmons 是另一个值得关注的优秀设计师。她的网站The Experimental Layout Lab和 YouTube 频道Layout Land上有很多精彩的例子。

Wes Bos 的课程
Wes Bos在网上有很多精彩内容，从课程到他与联合主持人Scott Tolenski合作的播客Syntax FM

Jonas Schmetmann Jonas 在 Udemy 上有一门很棒的高级 CSS 和 Sass课程。每次有人问起 CSS 课程，我都会看到他的名字。我个人就上过他的课，非常喜欢。

你最喜欢的 CSS 资源有哪些？有什么我遗漏的，你想补充吗？请在评论区留言告诉我。

封面照片由Pexels 上的Lukas拍摄