Almond.CSS：一套无类 CSS 样式表

过去几周，我一直在做一个有趣的项目：一个无类 CSS 库*。

我知道严格来说它不能算作一个库，但为了方便起见，我就这么称呼它了，这样我就不用每次都写“一组无类 CSS 样式”了 :P

我们的目标是提供一套可以轻松应用于任何网站的样式，使其外观更加美观。并非要打造极致华丽的效果，但肯定比默认显示效果更好，并且尽可能在所有浏览器中都呈现最佳效果。

与其他项目（如 Bootstrap）不同，这是一个无类项目：所有样式都针对 HTML 标签，因此用户无需向其添加任何类/属性。

该项目的目标是：

• 不使用类或 ID（仅使用标签选择器）。
• 覆盖所有 HTML5 标签（或尽可能多的标签）。
• 确保它与各种浏览器兼容（或尽可能兼容）。
• 使其易于进行主题定制（通过使用 HSL 颜色和 CSS 变量）。
• 确保响应性、可访问性和易用性。
• 构建轻量级版本（未压缩时为 17KB，但 gzip 压缩后为 3KB）。
• 保持简洁而优雅（虽然这只是个人观点）。

在支持方面，我们决定放弃 IE11，专注于 Chrome、Edge、Firefox 和 Safari（包括移动版）。

结果

以下是结果演示，以及一些关于其中关键部分的说明。

主题

我们基于 CSS 变量和 HSL 颜色来实现主题设计。HSL 允许根据色相、饱和度和亮度三个参数定义颜色。使用 HSL 提供主色和辅助色，即可查看演示页面的自动变化。

默认主色为深浅蓝色，默认辅助色为中灰色。

除了颜色之外，还有更多参数可以更改，例如字体大小或粗细、边框圆角等。以下是一些开发者可以指定的值：

通用排版

默认字体我们选择了 Helvetica，备用字体为 Arial。它们都是网页安全字体，适用范围广，并且有多种字重可供选择（还可以自定义主题）。不过，默认字重可能有点太细了（尤其是在移动设备上）。

以下是一些元素的样式示例，以及一些根据其属性设置了特殊样式的链接：

形式元素

对于表单输入框，我们决定对所有不同类型的输入框进行不同的样式设置，通过添加图标来帮助用户更快地识别各个字段：

此外，还要使用主色来表示活动元素，这有助于后续的主题化：

您可以在另一篇文章中阅读有关如何创建交互式 HTML 输入的内容（示例与时间组件和动画有关，但它设置了执行类似操作的步骤）。

其他元素

有些元素是通用的，例如表格或按钮，我们需要将它们的样式设置为在所有浏览器中看起来相似：

此外，还有一些元素，要在所有浏览器中设置相同的样式会很麻烦（例如滑块、进度条、输入文件等）。

对于后者，我们选择至少找到一些共同点，例如将相似的元素设置为相同的宽度/高度，或者调整宽度以匹配所有浏览器。

接下来会发生什么？

我想继续开发和扩展这个库（即使只是为了好玩）。稍微清理一下，重新组织一下。

例如，目前库的大部分空间都被交互式表单输入和图像占据了。我正在考虑提供两个版本的库：一个包含这些元素，另一个不包含（或者对第一个版本进行扩展）。

经过 gzip 压缩后差别不大；但如果只是进行压缩，文件大小就会从包含图片增加到 17KB，而从不包含图片减少到 9KB 以下。

此外，我还想添加一个扩展功能，添加一些类，从而实现一些有趣的交互功能和结果：例如不同类型的表格、“预打包”的结构……

你觉得怎么样？有什么反馈意见吗？欢迎提出任何建议 :)