npm包 `bem-cn` 的使用教程

阅读时长 6 分钟读完

简介

bem-cn是一个node.js的npm包,它提供了一种方便的方式来定义BEM(块元素修饰符)类名,以及更容易地在React或其他前端框架中使用这些类名。它可以使HTML和CSS更易于阅读和维护。

安装

用法

常规使用说明

在javascript文件中引入 bem-cn 模块并提供 block 名称作为参数,然后可以使用 em等函数来创建块、元素和修饰符的类名。这样做能够确保生成的类名符合BEM规范:

高级使用说明

在复杂的情况下,可能需要在一个组件中多次使用 bem-cn,这时有一种更为高级的使用替代方式。我们可以将 bem-cn 函数作为一个类属性,以及将类属性传递给子组件。

例如,假设我们有一个“Button”组件,它有三个状态:disabledprimarysecondary。我们可以使用 bem-cn 把每个状态的类名定义为属性。(注意:为了简化示例,我们省略了React的实际代码)

-- -------------------- ---- -------
-- ---------

------ --------- ---- ---------

----- --- - --------------------

----- ------ ------- --------- -
  -------- -
    ----- - --------- -------- --------- - - -----------
    ----- --------- - ------
    ----- ------------- - ----- -------- ---
    ----- ------------ - ----- ------- ---
    ----- -------------- - ----- --------- ---

    ------ -
      -------
        ------------
          ------------
          ----------------
          ---------------
          -----------------
        --
      -
        ---------------------
      ---------
    --
  -
-

现在我们可以在另一个组件中引用这个 “Button”组件,并且很容易地传递这些状态:

-- -------------------- ---- -------
-- ------

------ ------ ---- -----------

----- --- ------- --------- -
  -------- -
    ------ -
      -----
        ------- ----------------- ---------------
        ------- --------------- ---------------
        ------- ------------------- ---------------
      ------
    -
  -
-

这将生成以下HTML:

这样做会使我们的HTML和CSS更易于阅读和修改。

总结

bem-cn 是一个灵活的工具,可以使我们更好地组织HTML和CSS,并且在使用React等前端框架时更容易引用这些类名。既可以在通用环境中使用,也可以在特定的React组件中使用。重要的是,使用BEM约定编写的CSS样式代码更易于阅读、理解和维护。

示例代码

-- -------------------- ---- -------
------ --------- ---- ---------

----- --- - ----------------------

----- ------------ - ----- -- ----------
----- ------------------- - -------------- -- -------------------
----- -------------------- - ----- ---- ----- -- -- --------- ------------------
----- --------------------------- - -------------- - ---- ----- -- -- ------------------ ---------------------------

-- --------

-- ---------
------ --------- ---- ---------

----- --- - --------------------

----- ------ ------- --------- -
  -------- -
    ----- - --------- -------- --------- - - -----------
    ----- --------- - ------
    ----- ------------- - ----- -------- ---
    ----- ------------ - ----- ------- ---
    ----- -------------- - ----- --------- ---

    ------ -
      -------
        ------------
          ------------
          ----------------
          ---------------
          -----------------
        --
      -
        ---------------------
      ---------
    --
  -
-

-- ------
------ ------ ---- -----------

----- --- ------- --------- -
  -------- -
    ------ -
      -----
        ------- ----------------- ---------------
        ------- --------------- ---------------
        ------- ------------------- ---------------
      ------
    -
  -
-

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/bem-cn