在前端开发中，样式风格统一是很重要的，以便于不同开发者协同工作。在样式设计中，使用规范的 class 命名，避免样式冲突也是不可或缺的。@discussify/styleguide 发布的 npm 包就是一款实现这些功能的样式库。
安装
安装 @discussify/styleguide 非常简单，你只需要在命令行中输入以下命令：
npm install @discussify/styleguide
使用
在项目中使用 @discussify/styleguide，你只需要在 HTML 文件中引用它提供的 CSS 文件，就可以开始使用了。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------------------------------------------
-------------------
-------
------
---------------
-- --------------------------------------
-------
-------如上所示，你可以在 HTML 中使用 s-guide-text-red 类名为文本添加红色样式。
类名规范
使用 @discussify/styleguide，你需要遵循它使用的类名规范，以便于其他开发者理解你的代码含义。
标题
| 类名 | 说明 |
|---|---|
| s-guide-title[1-6] | h1-h6 标题 |
文本
| 类名 | 说明 |
|---|---|
| s-guide-text-black | 黑色文本 |
| s-guide-text-gray | 灰色文本 |
| s-guide-text-blue | 蓝色文本 |
| s-guide-text-red | 红色文本 |
| s-guide-text-green | 绿色文本 |
按钮
| 类名 | 说明 |
|---|---|
| s-guide-btn-primary | 主要按钮 |
| s-guide-btn-secondary | 次要按钮 |
可定制化
@discussify/styleguide 还提供了一些变量供你自定义样式。
@discussify-styleguide-font-size-base: 16px; // 基础字体大小 @discussify-styleguide-color-black: #000000; // 黑色 @discussify-styleguide-color-gray: #cccccc; // 灰色 @discussify-styleguide-color-blue: #409eff; // 蓝色 @discussify-styleguide-color-red: #f56c6c; // 红色 @discussify-styleguide-color-green: #67c23a; // 绿色
总结
学习并使用 @discussify/styleguide，能够让你的样式更加统一、规范，并且可以轻松地定制化自己的样式。相信随着你对该库的更深入了解和使用，你会成为一个更加优秀的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822de6