npm 包 @infctr/bem-cn 使用教程

阅读时长 4 分钟读完

BEM 是面向组件的 CSS 架构风格,它的核心是将页面分解成不同的组件,并使用块、元素、修饰器的方式来定义 CSS 样式。而 @infctr/bem-cn 是一个 npm 包,旨在提供一种更加灵活和易用的方式来处理 BEM 类名的生成和管理,使得我们可以更加快速地编写和维护 BEM 样式。

本文将详细介绍 @infctr/bem-cn 的使用方法,并提供一些示例代码,希望能够帮助到前端开发者更好地应用 BEM 样式。

安装和引入

首先,我们需要通过 npm 来安装 @infctr/bem-cn 包。在终端中输入以下命令:

安装完成后,我们需要在项目中引入该包:

基本用法

在使用 @infctr/bem-cn 之前,我们需要先创建一个 BEM 实例:

其中,'block' 表示当前 BEM 实例所代表的块名。我们可以通过该实例来生成不同元素和修饰器的类名。

创建块

我们可以使用 bem.block() 方法来生成当前块的类名:

创建元素

我们可以使用 bem.elem() 方法来生成当前块中某个元素的类名:

创建修饰器

我们可以使用 bem.mod() 方法来为当前块或元素添加修饰器:

创建情景

情景(scenario)是基于 BEM 结构派生出来的概念,它是由块、元素和修饰器组成的一个完整的类名。在 @infctr/bem-cn 中,我们可以使用 bem 对象的属性来生成一个情景:

在上面的例子中,userCard 可以看做是一个由块、元素和修饰器组成的情景,并以对象的形式展现。通过该对象,我们可以快速获得其对应的类名和属性。这在编写 React 组件时非常有用。

上下文嵌套

在实际应用中,我们可能需要在某个元素中再次创建元素或修饰器。在 @infctr/bem-cn 中,我们可以通过上下文嵌套的方式来实现:

在上面的例子中,首先我们创建了一个 BEM 实例,并使用 elem() 方法生成了一个元素。然后,在该元素的上下文中,我们再次调用了 mod() 方法,生成了一个新的修饰器。

总结

@infctr/bem-cn 是一个非常实用的 npm 包,它减少了我们在编写 BEM 样式时的工作量,提高了编写效率。通过本文的学习,你已经了解了该包的基本使用方法,并知道如何在实际应用中灵活地使用它。希望你能够在项目中使用这个包,并将 BEM 的优秀理念应用到实际工作中。

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

纠错
反馈