简介
bem-cn
是一个node.js的npm包,它提供了一种方便的方式来定义BEM(块元素修饰符)类名,以及更容易地在React或其他前端框架中使用这些类名。它可以使HTML和CSS更易于阅读和维护。
安装
npm install bem-cn
用法
常规使用说明
在javascript文件中引入 bem-cn
模块并提供 block
名称作为参数,然后可以使用 e
、m
等函数来创建块、元素和修饰符的类名。这样做能够确保生成的类名符合BEM规范:
import creaateBem from 'bem-cn'; const bem = createBem('my-block'); const myBlockClass = bem() // 'my-block' const myBlockElementClass = bem('element') // 'my-block__element' const myBlockModifierClass = bem({ foo: 'bar' }) // 'my-block my-block--foo-bar' const myBlockElementModifierClass = bem('element', { foo: 'bar' }) // 'my-block__element my-block__element--foo-bar'
高级使用说明
在复杂的情况下,可能需要在一个组件中多次使用 bem-cn
,这时有一种更为高级的使用替代方式。我们可以将 bem-cn
函数作为一个类属性,以及将类属性传递给子组件。
例如,假设我们有一个“Button”组件,它有三个状态:disabled
、primary
和secondary
。我们可以使用 bem-cn
把每个状态的类名定义为属性。(注意:为了简化示例,我们省略了React的实际代码)
-- -------------------- ---- ------- -- --------- ------ --------- ---- --------- ----- --- - -------------------- ----- ------ ------- --------- - -------- - ----- - --------- -------- --------- - - ----------- ----- --------- - ------ ----- ------------- - ----- -------- --- ----- ------------ - ----- ------- --- ----- -------------- - ----- --------- --- ------ - ------- ------------ ------------ ---------------- --------------- ----------------- -- - --------------------- --------- -- - -
现在我们可以在另一个组件中引用这个 “Button”组件,并且很容易地传递这些状态:
-- -------------------- ---- ------- -- ------ ------ ------ ---- ----------- ----- --- ------- --------- - -------- - ------ - ----- ------- ----------------- --------------- ------- --------------- --------------- ------- ------------------- --------------- ------ - - -
这将生成以下HTML:
<div> <button class="button button--disabled">Disabled Button</button> <button class="button button--primary">Primary Button</button> <button class="button button--secondary">Secondary Button</button> </div>
这样做会使我们的HTML和CSS更易于阅读和修改。
总结
bem-cn
是一个灵活的工具,可以使我们更好地组织HTML和CSS,并且在使用React等前端框架时更容易引用这些类名。既可以在通用环境中使用,也可以在特定的React组件中使用。重要的是,使用BEM约定编写的CSS样式代码更易于阅读、理解和维护。
示例代码
-- -------------------- ---- ------- ------ --------- ---- --------- ----- --- - ---------------------- ----- ------------ - ----- -- ---------- ----- ------------------- - -------------- -- ------------------- ----- -------------------- - ----- ---- ----- -- -- --------- ------------------ ----- --------------------------- - -------------- - ---- ----- -- -- ------------------ --------------------------- -- -------- -- --------- ------ --------- ---- --------- ----- --- - -------------------- ----- ------ ------- --------- - -------- - ----- - --------- -------- --------- - - ----------- ----- --------- - ------ ----- ------------- - ----- -------- --- ----- ------------ - ----- ------- --- ----- -------------- - ----- --------- --- ------ - ------- ------------ ------------ ---------------- --------------- ----------------- -- - --------------------- --------- -- - - -- ------ ------ ------ ---- ----------- ----- --- ------- --------- - -------- - ------ - ----- ------- ----------------- --------------- ------- --------------- --------------- ------- ------------------- --------------- ------ - - -
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/bem-cn