BEM on Rails: 在Rails中实现BEM方法

资源摘要信息:"Rails 应用程序的 BEM 方法" 1. BEM方法介绍 BEM（Block, Element, Modifier）是一种面向块的CSS类命名方法。它由Yandex团队开发，目的是帮助开发者更好地组织和结构化他们的CSS代码。BEM方法的核心思想是将页面分为独立的组件（即“块”），每个块都可以包含更小的子元素（即“元素”），并且可以通过“修改器”改变其外观或状态。这种方法提高了代码的可读性和可维护性，并且可以轻松地重用组件。 2. BEM在Rails中的应用 “bem-on-rails”是一个Ruby gem，它将BEM方法集成到Rails应用程序中。bem-on-rails是bem-tools的Ruby版本的fork，旨在简化Rails项目中的CSS组织。通过使用bem-on-rails，Rails开发者可以更容易地遵循BEM命名约定，从而提高代码的结构清晰度。 3. 安装步骤 要使用bem-on-rails，首先需要将其添加到Rails项目的Gemfile中，执行以下命令： ``` gem 'bem-on-rails' ``` 然后运行bundle命令来安装gem： ``` $ bundle ``` 或者可以选择手动安装gem： ``` $ gem install bem-on-rails ``` 安装完成后，需要运行安装生成器来设置bem-on-rails： ``` $ rails g bemonrails:install ``` 安装生成器会创建必要的文件和目录结构，以便bem-on-rails可以正确工作。安装完成后，开发者应当重启服务器以确保改动生效。 4. 使用bem-on-rails 在Rails应用中使用bem-on-rails，开发者可以在相应的层级目录下创建块、元素及其修改器。bem-on-rails推荐的默认文件夹结构如下所示： ``` 贝姆 级别名称 块名称 __element_name 块名__element_name.html.haml ``` 在上述结构中，每个块可以有自己的子元素，块和子元素通过双下划线“__”进行连接，而修改器则是通过双破折号“--”来标识。 5. BEM的实践优势 - **组件化**：BEM鼓励开发者将界面分解成独立的组件，这有助于实现组件的复用。 - **模块化**：通过块和元素的划分，代码变得模块化，易于管理和扩展。 - **明确的依赖关系**：BEM的命名规则清晰表明了各个组件之间的关系，有助于开发者理解页面结构。 - **减少冲突**：由于BEM的命名规则具有全局唯一性，减少了不同开发人员编写的代码之间的样式冲突。 6. 与YaC 2013的相关性 作者提到他在2013年的YaC会议上用俄语讨论了这个gem。YaC（Yet Another Conference）是一年一度的俄罗斯技术大会，通常会探讨一些前沿的技术话题。作者在会议上可能分享了关于bem-on-rails的构思、开发过程以及如何在Rails应用中应用BEM方法的经验。 总结来说，bem-on-rails提供了一个在Rails项目中实现BEM命名约定的便捷工具，它旨在通过模块化和结构化的CSS组织来提升Rails应用的可维护性和可扩展性。通过遵循BEM方法，开发者可以更容易地构建和管理大型前端项目，并保持样式的清晰和一致性。