getbem.com

一句话介绍

Getbem.com 是 BEM（Block Element Modifier）前端 CSS 命名方法论官方推出的学习与推广网站，由俄罗斯团队 Yandex 在 2010 年代初期提出并维护。这个网站并非一个商业 SaaS 平台或付费工具，而是一个面向全球前端开发者的免费知识资源站，核心目的是帮助开发者理解并实践 BEM 命名规范。选择它的开发者通常是因为项目中遇到了 CSS 命名混乱、样式冲突或可维护性差的问题，希望通过标准化的命名约定来提升代码质量。

业务详解

Getbem.com 本质上是一个轻量级的文档型网站，提供 BEM 方法论的基础概念讲解、代码示例和最佳实践指南。BEM 本身源于 Yandex 内部的大型项目开发经验，后来被开源并广泛应用于全球前端社区。该网站在行业中的地位属于“经典教科书”级别——它不是最前沿的框架，但却是许多前端工程师入门模块化 CSS 的必修课。网站内容覆盖了 BEM 的核心三要素：块（Block）、元素（Element）和修饰符（Modifier），并通过简单的 HTML/CSS 示例说明如何避免样式污染。客户类型主要是前端开发者、UI 组件库维护者以及需要制定团队 CSS 规范的架构师。由于网站不涉及付费服务或托管，其运营模式更接近社区项目，更新频率较低，但内容具有长期参考价值。

适合谁用

这个网站最适合以下人群：

• 前端初学者：正在学习 CSS 模块化思想，需要从零理解命名约定。
• 中小型团队：希望统一团队 CSS 编码规范，减少样式冲突。
• 组件库开发者：构建可复用的 UI 组件时，需要清晰的命名隔离。
• 项目重构者：接手混乱的旧项目，想逐步引入 BEM 提升可维护性。
• 不适合人群：追求最新 CSS 特性（如 CSS Modules、Scoped Styles）的开发者，或需要完整组件库框架（如 Tailwind CSS）的用户。

关键功能与亮点

• 核心概念图解：用直观的图示解释 Block、Element、Modifier 的层级关系，降低学习成本。
• 代码示例库：提供 HTML+CSS 的实际代码片段，覆盖按钮、导航、卡片等常见 UI 模式。
• 命名规则速查：清晰说明双下划线（__）和双连字符（--）的用法，避免常见错误。
• 反模式警告：专门列出 BEM 使用中的常见坑，如过度嵌套、滥用修饰符等。
• 离线友好：网站内容轻量，无需 JavaScript 框架即可加载，国内用户直连速度极快。
• 社区链接：提供 GitHub 仓库和讨论区入口，方便开发者贡献案例或提问。

价格分析

Getbem.com 完全免费，所有内容无需注册或付费即可访问。它没有会员体系、订阅计划或隐藏收费项目，甚至连广告都未发现。相比其他 CSS 方法论资源（如《CSS 权威指南》书籍约 50 美元、Tailwind CSS 付费课程约 99 美元），这个网站的成本为零。但要注意的是，它只提供基础理论教学，不包含在线编辑器、代码测试环境或企业级培训服务。对于预算敏感的独立开发者或学生来说，这是性价比最高的入门选择，但需要自行承担实践和调试的时间成本。

中国用户怎么用

国内用户可以直接通过浏览器访问 getbem.com，无需科学上网工具，网络延迟极低。网站没有使用 Google Fonts 或 CDN 资源，加载速度接近本地站点。支付方面，由于网站完全免费，不涉及任何支付环节，因此无需担心 Visa、支付宝或微信支付的兼容性问题。发票方面，网站不提供任何商业交易，无法开具国内税务发票。如果需要国内替代品，可以搜索“BEM 中文网”或“CSS 命名规范 BEM 教程”，但大部分中文资料是个人博客翻译，权威性不如官方站点。建议国内开发者直接使用 getbem.com 作为主要参考，再配合 MDN 的中文文档做补充。

优缺点对比

优点：

• ✅ 完全免费且无广告，适合预算有限的开发者
• ✅ 内容权威，由 BEM 原创团队维护，避免错误解读
• ✅ 国内直连速度优秀，无需任何网络工具
• ✅ 示例代码简洁，便于直接复制到项目中测试
• ✅ 无注册要求，保护用户隐私

缺点：

• ❌ 更新频率低，最新 CSS 特性（如 CSS Layers、容器查询）未涉及
• ❌ 缺乏交互式编辑器或实战练习环境
• ❌ 没有中文翻译版本，英文基础较弱的用户可能吃力
• ❌ 不提供企业级支持或定制化培训
• ❌ 网站设计老旧，移动端适配体验一般

同类产品对比

• CSS Tricks（css-tricks.com）：更全面的 CSS 知识库，涵盖 Flexbox、Grid 等现代布局，但内容泛化，BEM 专题深度不如 Getbem。适合需要一站式 CSS 参考的用户。
• MDN Web Docs（developer.mozilla.org）：官方技术文档，权威性最高，但 BEM 相关描述分散在 CSS 命名章节中，不如 Getbem 集中。适合需要权威定义时查阅。
• Smashing Magazine：偏向设计和技术文章，BEM 内容多为作者经验分享，风格灵活但缺乏系统性。适合需要项目案例分析的读者。

三者中，Getbem 的优势在于专一性和免费性，但功能范围和更新速度均弱于前两者。

总结建议

这个网站最适合以下场景：你是前端新手或团队负责人，需要快速理解 BEM 的核心规则，并且希望有一个无干扰、无付费的参考资料。它不适合作为大型项目的唯一 CSS 规范指南——因为 BEM 本身只是命名约定，不解决 CSS 模块化工具链（如 PostCSS、CSS Modules）的选型问题。建议先花 30 分钟浏览 Getbem 的示例页面，然后直接在自己的项目中实践 BEM 命名。如果发现项目规模过大导致命名冗余，可以再考虑结合 SCSS 的 @extend 或 @mixin 来优化。由于网站完全免费且无需注册，不存在试错成本，直接使用即可。