面向所有 Web 开发者的 Hacktoberfest 项目：Style Stage

无论您是刚开始学习 Web 开发，还是已经学习了一段时间，Style Stage 都是一个更新和练习 CSS 技能的创造性机会。

继续阅读以了解什么是 Style Stage，并获取一些有用的资源来做出您的贡献。

Style Stage 是一个现代 CSS 展示平台，其样式均由社区贡献。向此代码库发起拉取请求，即可将您专属的 CSS 样式表添加到该展示平台。

CSS 新手？CSS 专家？好久没接触 CSS 了，需要练习一下？无论您的 CSS 技能排名如何，Style Stage 都欢迎您贡献自己的力量！

工作原理

为 Style Stage 做贡献需要创建您自己的样式表来重新设计主页。您不得修改 HTML，并且必须遵守样式指南才能被收录到展示区。Style Stage 是一个学习的机会，而不是选美比赛。所有符合指南的提交作品都将被接受！

通过发布公告和阅读网站内容了解有关 Style Stage 的更多信息。

开始

有 4 个现成的选项可供您开始使用：

• 访问文件部分下载源文件
• 获取原始 Main Stage 的 Sass 模板，其中包括用于在创建样式时进行热重载的 BrowerSync
• 通过分叉完整源代码 CodePen直接进入。
• 使用Style Stage Skeleton Starter CodePen获得最小提升

提交您的贡献

首次提交 PR？请查看Style Stage 上的常见问题解答。

担心 PR 审核流程？可以查看我的 Twitter 帖子，了解相关流程的技巧。

风格阶段参与者的学习成果和资源

1. （重新）熟悉级联 - 因为您无法修改 HTML 来添加更多特定类或重新排列元素或添加 Javascript，所以使用级联对于成功至关重要
2. 练习新旧布局技术，例如CSS 网格和 flexbox
3. 学习和练习使用现代 CSS 属性 - Style Stage 上有一个很棒的列表可以激发您的灵感，更不用说了解现有展示样式所使用的技术
4. 复习一下 CSS 选择器，例如相邻兄弟 ( +)、使用 的各种选择方式:nth，以及元素和属性选择器。不妨看看CSS Diner，通过一种有趣的方式练习和学习可用的选择器。
5. 当您将页面元素视为一个系统并考虑它们如何交互、边界处发生什么、使用大小和空间创建关系，并探索选择字体堆栈和创建层次结构时，可以提高您的页面布局技能。

在 Style Stage 资源中查看更多提示>

PS - 我也是ModernCSS.dev的作者，这是一系列深入的教程，可帮助您提升 CSS 技能🚀

您可以在StyleStage.dev/styles/查看所有当前样式。