简介
ember-cli-bem 是一个基于 BEM（块/元素/修饰符）命名规范的 Ember.js 插件。它能够大幅减少开发人员的 CSS 代码量，并且在大型项目中提高可维护性。
在本文中，我们将探讨如何使用 ember-cli-bem 开发和维护一个带有复杂 UI 的 Ember 应用程序。
安装和设置步骤
使用 npm 安装
ember-cli-bem：npm install ember-cli-bem --save-dev
将
ember-cli-bem添加到你的 Ember 应用程序中，在ember-cli-build.js文件内加入以下配置：var app = new EmberApp(defaults, { 'ember-cli-bem': { // 选项 } });
你可以在选项中指定以下属性：
separators：一个对象，包含element,modifier, 和state的属性。它们分别指定了在使用 BEM 规范时分隔符的形式。{ element: '__', modifier: '--', state: '-is-' }
initialScope：一个字符串，指定了每个模块的 Initial Scope。如果没有指定，模块名称将被用作 Initial Scope。{ initialScope: 'my-app' }
使用示例
在你的 Ember 应用程序中创建一个名为 my-awesome-component 的组件，然后在其 .hbs 和 .scss 文件中使用 ember-cli-bem。
HTML 结构
我们将使用以下 HTML 代码作为 my-awesome-component 组件的基础结构：
-- -------------------- ---- ------- ---- -------------------------------------------------- ---- -------------------------------------------- --- ------------------------------------------- --------- ----- ------ ---- --------------------------------------------- --------- ------ ------展开代码
此处我们使用了 BEM 命名法，.my-app-my-awesome-component 作为块级元素，.my-app-my-awesome-component__header 和 .my-app-my-awesome-component__content 则为元素。
SCSS 样式
接下来，我们需要对 my-awesome-component 进行样式处理。在 SCSS 文件中，可以使用 & 来引用 BEM 命名规范中的块和元素名称。例如：
-- -------------------- ---- ------- -- ---- ---------------------------- - -- -- --------- - -- -- - -------- - -- -- - ---------- - -- -- - ------------- - -- -- - ----------- - -- -- - -展开代码
在此示例中，& 将被解析为 .my-app-my-awesome-component。这意味着，当我们添加 --full-width 修饰符时，它将被解析为 .my-app-my-awesome-component--full-width。
总结
ember-cli-bem 可以让你在开发 Ember 组件时更加高效和可维护。它使你能够大幅减少 CSS 代码行数，并且使用 BEM 规范加强了复用性。
我希望本文能帮助您在您的 Ember 应用程序中更好地使用 ember-cli-bem。如有任何问题或疑问，请在下方评论区提出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea481e8991b448e7707
