简介
在前端开发中，我们经常会遇到需要编写大量的样式代码的情况。为了提高开发效率和代码可维护性，我们可以使用 CSS 框架，如 Bootstrap、Materialize 等。这些框架提供了丰富的组件和样式类，使得我们可以更快速地编写 CSS 代码。但是，当我们只需要使用其中的某些组件或样式类时，引入整个框架显然是不优雅的。这时，我们可以选择使用 CSS 模块化解决方案，如 BEM、Tailwind 等。
@gdjiami/blocks 就是一款基于 BEM 的 CSS 模块化解决方案。它提供了一些常用的 CSS 组件和样式类，支持自定义颜色、字体等配置，同时也支持按需引入，避免了引入无用代码的问题。
安装
使用 npm 进行安装：
npm install @gdjiami/blocks
或者，使用 Yarn 进行安装：
yarn add @gdjiami/blocks
使用
引入样式
在你的项目中，引入 @gdjiami/blocks 的样式文件：
<link rel="stylesheet" href="/node_modules/@gdjiami/blocks/dist/blocks.min.css">
使用组件和样式类
@gdjiami/blocks 提供了一些常用的组件和样式类，以下是一些示例：
Button 按钮
<button class="btn">按钮</button>
Form 表单
-- -------------------- ---- -------
----- -------------
---- -----------------
---- ------------------------- ---------------------------------
---- ------------------------- ----------- --------------------
------
---- -----------------
---- ------------------------- --------------------------------
---- ------------------------- --------------- --------------------
------
---- -----------------
---- -------------------------
---- -------------------------- ---------- -------------- ----------------
------
-------Typography 排版
<p class="text-lg">大字体</p> <p class="text-sm">小字体</p> <p class="text-muted">灰色字体</p>
自定义配置
@gdjiami/blocks 支持通过配置自定义颜色、字体等。以下是一些常用的配置示例：
颜色配置
-- -------------------- ---- -------
-- -----
--------------- --------
----------------- --------
--------------- --------
-------------- --------
--------------- --------
------------ --------
------------- --------
------------ --------
-- -- --------------- ----
------- ------------------------------
-- -----
---- -
------------- -
----------------- ---------------
------------- ---------------
-
--------------- -
----------------- -----------------
------------- -----------------
-
------------- -
----------------- ---------------
------------- ---------------
-
------------ -
----------------- --------------
------------- --------------
-
------------- -
----------------- ---------------
------------- ---------------
-
---------- -
----------------- ------------
------------- ------------
-
----------- -
----------------- -------------
------------- -------------
-
---------- -
----------------- ------------
------------- ------------
-
-字体配置
-- -------------------- ---- -------
-- -----
----------------- ---------- ------ -------- -----------
---------------- --------- ------- --------- ----------
-- -- --------------- ----
------- ------------------------------
-- -----
----- -
------------ -
------------ -----------------
-
----------- -
------------ ----------------
-
-总结
@gdjiami/blocks 是一款基于 BEM 的 CSS 模块化解决方案，它可以提高代码可维护性，同时也支持自定义配置和按需引入。通过本文的介绍和示例，我们可以更好地理解和使用 @gdjiami/blocks。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115154