在前端开发中，样式表是非常重要的一部分。为了方便开发者进行样式的管理和使用，社区中出现了很多优秀的 CSS 框架和工具库。其中，@genesisui/styles 是一款基于 Sass 和 CSS3 的模块化样式框架，可以为你的项目提供丰富的 CSS 样式和组件。
本篇文章将为大家介绍如何使用 @genesisui/styles 框架，包括安装、使用、样式分类以及样式类名命名规范。
安装
使用 @genesisui/styles 需要先安装 Node.js 和 npm 包管理器。在命令行终端中执行以下命令安装 @genesisui/styles：
npm install @genesisui/styles --save-dev
安装完成后，在项目中的 package.json 文件中可以看到如下内容：
{
"devDependencies": {
"@genesisui/styles": "^1.0.0"
}
}使用
接下来，我们需要在项目中引入 @genesisui/styles 样式，可以使用 Sass、Less 或者直接使用 CSS。
Sass
在 Sass 中我们可以使用 @import 导入 @genesisui/styles 样式：
// 引入 @genesisui/styles 样式 @import '~@genesisui/styles';
Less
在 Less 中我们可以使用 @import 导入 @genesisui/styles 样式：
// 引入 @genesisui/styles 样式 @import '~@genesisui/styles';
CSS
如果直接使用 CSS，我们可以在 HTML 中使用 link 标签引入：
<link href="./node_modules/@genesisui/styles/dist/genesisui.min.css" rel="stylesheet">
引入样式后，可以在 HTML 中使用 @genesisui/styles 样式：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- -------------------------
----- -------------------------------------------------------------- -----------------
-------
------
------- -------------------
---- -----------------------------------
---- ---------------------------
------- ------------------------- -----------------------------------
----- --------------------------------------
---------
------
---- ----------------------------
--- -----------------------
--- ---------------------
-- -------- ------------------------- -----
-----
--- ---------------------
-- -------- ------------------------- -----
-----
--- ---------------------
-- -------- ------------------------- -----
-----
-----
------
---------
-------
-------样式分类
@genesisui/styles 样式分类如下：
- Utilities（工具类）
- Base（基础）
- Components（组件）
- Templates（模板）
Utilities
Utilities 是一些独立的、被频繁使用的样式类，可以用来快速解决一些缺陷或兼顾兼容性等问题。它们是非常小的，一般只包含一个属性。
// 引入 Utilities 样式
@import '~@genesisui/styles/utilities';
// 使用 Utilities 样式
.bg-primary {
@include background-color($gui-primary-color);
}Base
Base 样式包含一些通用的 reset 样式和基础、全局的样式，可以在整个网站中使用。这些样式将会覆盖掉浏览器默认的样式。
-- -------------------- ---- ------- -- -- ---- -- ------- -------------------------- -- -- ---- -- ---- - -------- ---------------- -------- ----------------- -------- ----------------------- ------ ------------- ------ --------------------- ----------------- --------------------------- -
Components
Components 包含了一些常用的网页组件的样式，比如：导航、表格、表单、按钮等。组件一般是由多个基础样式组成的，所以在使用组件之前需要先从 Base 或者 Utilities 中使用必要的样式。
-- -------------------- ---- -------
-- -- ---------- --
------- --------------------------------
-- -- ---------- --
----------- -
------- -----
----------------- ---------------------------
-------- ------------------ ------ ------------------------
- ----------------- -
---------- -----
------ ---------------------
------------ -----
-------- - -----
--------------- -------
-------- -------------
-
- ------------------- -
-------- -----
-------- ------------------ -------- -
------ ------
-------- ------
-
-
- -------------------- -
-------- ------------------ -------- -
-------- -----
------ -----
-
- --------------- -
----------- -----
----------- -------
------- --
-------- --
-------- -------------
-------- ------------------ -------- -
------ -----
-
- ------------- -
-------- -------------
-------- ------------------ -------- -
------ -----
-
- ------------- -
-------- ------
---------- -----
------ ---------------------
------------ -----
-------- - -----
------- -
------ -------------------
-
-
-
-
-
- ------------------ -
-------- -----
-------- ------------------ -------- -
--------- ---------
---- --
------ --
-------- ------
------ -----
------- -----
----------------- ---------------------------
------- -----
------- --------
- ----------------------- -
-------- ------
--------- ---------
------ -------
---- -------
------ -----
------- -----
------------- --- ----- ---------------------
-------------- --- ----- ---------------------
---------- --------------
----------- --------- ---- ---------
-
------- - ----------------------- -
------------- -------------------
-
-
-
-Templates
Templates 包含绝大部分页面的样式，其中一些包含了各种不同的排列组合，用来实现特定的页面布局。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- -------------------------
----- -------------------------------------------------------------- -----------------
-------
------
---- ----------------------
---- ----------------
---- ----------------------------------------
---- ----------------------------------------
---- ----------------------------------------
------
---- ----------------
---- ----------------------------------------
---- ----------------------------------------
------
---- -----------------
---- ---------------------
---- --------------------------------
---- --------------------------------
---- --------------------------------
------
---- -------------------------
---- ----------------------------
---- ----------------------------
---- ----------------------------
------
------
------
-------
-------样式类名命名规范
@genesisui/styles 的样式类名遵循 BEM 命名规范，即 Block（块）、Element（元素）、Modifier（修饰符）。样式名不使用缩写和特殊字符，全部用小写并用连字符分隔。
- Block：独立的、有意义的 UI 组件。
- Element：组成 Block 的一部分，没有独立的意义，不能单独使用。
- Modifier：修改 Block 或 Element 的状态或者外观，使用时加在 Block 或 Element 的后面。
举例
-- -------------------- ---- -------
---- -------------------
---- -----------------------------------
---- ----------------------------
--- -----------------------
--- ---------------------
-- -------- ------------------- ------------------------- -----
-----
--- ---------------------
-- -------- ------------------------- -----
-----
--- ---------------------
-- -------- ------------------------- -----
-----
-----
------
------- Block：gui-navbar
- Element：gui-navbar-brand、gui-navbar-collapse、gui-navbar-nav、gui-nav-item、gui-nav-link
- Modifier：gui-nav-link-active
以上是 @genesisui/styles 的使用教程和样式分类，希望对大家在前端开发中提供帮助，让我们的开发更加高效、优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737d81e8991b448e9712