我最喜欢的 5 个前端备忘单和书签 1. CSS Grid 备忘单 2. CSS Flex 备忘单 3. 缓动函数 4. CSS clip-path maker 5. CSS-TRICKS.com

2025-06-10

我最喜欢的 5 个前端速查表和书签

1. CSS 网格速查表

2. CSS Flex 速查表

3. 缓动函数

4. CSS 剪辑路径生成器

5. CSS-TRICKS.com

首先,我想先说一下,我认为时不时地回归基本面永远不是一个坏主意。

我坚信,无论你多么经验丰富或技术精湛,都应该偶尔花点时间重新审视你所做的事情的根本。不要把它看作是后退一步,而要把它看作是加固地基,让建在地基上的房屋更加坚固。每次这样做,你往往都能找到新的见解。⠀

因此,尽管这些帖子主要针对初学者(因为我也认为自己是初学者),但一些更高级的前端人员可能会发现其中一些也很有用。

那么,我们开始吧。以下是我工作时随身携带的、我最喜欢的小抄和书签

1. CSS 网格速查表

作者:Malven Co.
grid.malven.co

CSS 网格速查表

关于 Grid 的文章和参考资料有很多,但这篇绝对是我最喜欢的。它是一个非常好的可视化备忘单,所有设置都图文并茂地展示在一页纸上,让你一眼就能找到(并理解)它们,这才是备忘单应有的样子!

2. CSS Flex 速查表

由 Malven Co.
flexbox.malven.co

CSS Flex 速查表

和上一款一样,不过用的是 Flex。
是的,我太喜欢这款了,所以在我的清单里加了两个位置!:)

3. 缓动函数

作者:Andrey Sitnik和 Ivan Solovev
easings.net

缓动函数

线性过渡太烂了吧?:)
这个有很多缓动函数示例,还有大小、位置、透明度和渐变的预览。
当然也包括贝塞尔曲线。

4. CSS 剪辑路径生成器

作者:Bennett Feely
bennettfeely.com/clippy

CSS 剪辑路径生成器

只需点击几下,你就能创建并预览剪辑路径!非常简单直观。

5. CSS-TRICKS.com

由一群很酷的人组成的大型社区
css-tricks.com

CSS-TRICKS.com

算不上什么速查表,因为我没法只选一个功能,整个网站都很棒。
可能是我目前为止见过的最好的 CSS 资源了。

你还有其他符合这个列表的资源吗?欢迎在评论区留言,我会查看,如果觉得好用,也可能会发布到我的Instagram快拍里。

祝您度过愉快的一周!

鏂囩珷鏉ユ簮锛�https://dev.to/vladimir_dev/my-5-favorite-front-end-cheat-sheets-and-bookmarks-4nj4
PREV
日常 JavaScript 函数式编程:使用 Maybe
NEXT
Python Zero to Hero #初学者⚡ 先决条件:1. 你的机器中已经安装了 Python。如果你已经在系统中安装了 Python,请按 Win 键并打开命令提示符 Python 中的 Hello World 注释 Python 中的数据类型从用户那里获取输入并将其存储在变量中 列表和索引 Python 运算符 Python 字符串操作 Python 中的集合 Python 中的类型转换 Python 中的子集 列表操作 字符串操作 缩进 使用函数 Python 中的 For 循环 If 语句:If 语句,没有缩进(将引发错误) Python 中的 While 循环 异常处理 使用模块现在怎么样?列表在 Python 中是可变的