simpledev.css 是一个新的 CSS 框架，我将其描述为大多数无类框架。我称其为无类，因为许多代码使用类型选择器，因此您不必添加许多类来设置网页样式。有一些类，但我们尽量将它们保持在最低限度（到目前为止只有大约 42 个类）。

让我们回顾一下下面的一些功能！

特征

1. 大部分是无类别的设计：它基本上是无类别的，所以只要添加框架，您就会看到纯 HTML 页面发生变化。
2. 常见元素的最小类：我们为真正常见的东西提供类：导航栏、使链接看起来像按钮、基本页脚等。
3. 以辅助功能为中心：我不是辅助功能专家，但我尽力将辅助功能最佳实践纳入框架中。因此，框架有一个跳过链接组件，一个视觉上隐藏的类，我们使用 rems 来表示字体大小。
4. 主题支持： simpledev.css 支持不同的主题。您可以仅使用浅色模式、仅使用深色模式或同时使用两者。
5. 最少的 JavaScript： JS 非常轻。我们只使用 JS 作为导航栏组件。如果您不使用导航栏（或者您使用简单的导航栏组件），您可以完全跳过 JS！
6. 易于开始： 我们有一个入门页面，其中包含可供您复制或下载的基本和高级模板、可供您下载或用于启动新存储库的 GitHub 存储库以及来自 CodePen 的笔直接在浏览器中尝试。
7. 食谱：我们还有一个食谱页面，您可以在其中将 CSS 规则复制并粘贴到您的 custom.css 文件中，以获得粘性导航栏、圆角、条纹表格和平滑滚动等内容！
8. 自定义调色板：您可以自带调色板。 simpledev.css 默认情况下没有任何颜色，因此您可以选择自己的颜色并将其添加到框架中。
9. 模块化组件： 从技术上讲，您可以下载一些组件并根据需要单独使用它们。只需访问 GitHub 存储库并下载所需的 CSS 文件即可。请记住，我们在 Modern Normalize 之上开发了我们的组件，因此您可能需要合并 Modern Normalize 才能获得相同的外观。

背景

去年我在 GitHub 上发现了 Awesome-css-frameworks 存储库。它包含一长串分为不同类别的 CSS 框架。我对 Classless CSS 框架部分特别感兴趣。我喜欢链接到 CSS 文件并立即更改 HTML 页面的外观而无需修改 HTML 的想法。

最初，我受到列表中名为 Water.css 的框架的启发，但后来我从另一个无类框架 Pico.css 中获得了更多灵感。

最终我决定尝试创建自己的框架。然而，我希望它有点不同：

• 我决定只使用 vanilla CSS 而不是 Sass。这是因为我希望其他人能够轻松尝试该框架并从源代码中学习。
• 我不希望它是纯粹无类的，因为我认为有些东西需要 CSS 类。
• Pico 可能是最好看的无类 CSS 框架，但我觉得有些元素/组件有点大，所以我希望我的元素/组件更小。

结论

感谢您阅读这篇文章！我有几个问题想请教：

1. 请在 GitHub 上为该存储库加注星标！
2. 尝试使用框架构建一个小项目
3. 如果您发现任何问题，请在 GitHub 上创建问题
4. 如果您有任何功能请求，请在 GitHub 上发起讨论
5. 如果您对组件有想法，请尝试在 CodePen 上构建它！

如果您有任何问题或建议，请在下面留言！稍后我可能还会跟进 simpledev.css 的教程。