优先选bem或smacss取决于团队协作模式与项目规模：bem适合组件边界清晰、多人协作的vue/react项目，命名自带模块上下文；smacss适合大型app且有专职样式架构师，按职责分层但易成全局垃圾场；实践中常混合使用，bem管模块内命名，smacss管跨模块状态。
选 SMACSS 还是 BEM，不取决于哪个“更先进”，而取决于你当前项目里谁在写 CSS、改样式要动几个文件、有没有人会不小心覆盖 .btn。
团队协作节奏快，组件边界清晰时优先用 BEM
BEM 的 card__title、card__button--disabled 这类命名自带上下文，新人看 HTML 就能知道这个标题属于哪个模块，不会误以为 header__logo 和 footer__logo 是同一套样式。
- 适合 Vue/React 组件库或独立 UI 包开发：每个组件一个目录（
button/下放button.css、button.js），改按钮只开这一个地方 - 禁止
menu__item__icon这种嵌套写法，强制扁平结构，避免选择器权重失控 - 修饰符只表达静态变体（
button--primary），不建议塞状态逻辑（如button--is-loading），否则容易和 JS 状态管理耦合过紧 - VS Code 插件（如 BEM Tools）能自动补全
__和--，减少手误；但滥用修饰符（比如button--large--dark--disabled--loading）会让类名难以维护
大型 Web App 且有专职样式架构师时考虑 SMACSS
SMACSS 把样式按职责拆成 base.css、layout.css、modules/、states/、themes/，适合 Layout 层由前端架构师统一维护、Module 层由业务组各自负责的分工模式。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
base.css放重置和基础元素样式（h1、a、.btn），但容易变成“全局样式垃圾场”，后期想抽离某条规则几乎不可能 - 状态类（如
is-hidden、is-active）不绑定具体模块，可跨组件复用，但语义模糊——is-active到底是菜单项激活？Tab 标签激活？还是表单输入框聚焦？得靠文档或上下文推断 - 类名组合自由（
promo-card is-hidden合法），但 React/Vue 中动态拼接容易漏空格或重复加类，比如className={`promo-card ${isActive ? 'is-active' : ''}`>多个条件时易出错 - 对类名格式无硬性要求，
promo-card-title和promo-card__title都可以，但团队必须约定前缀含义，否则user-avatar和avatar-user混用就乱了
混合使用比强行二选一更现实
实际项目里，BEM 和 SMACSS 很少互斥。常见做法是：用 BEM 写模块内部类名（search-form__input），用 SMACSS 的状态类控制跨模块行为（is-disabled、has-error）。
- 例如：
search-form__submit-button is-disabled—— 前者明确归属，后者表达通用禁用态 - 文件组织上，BEM 倾向模块内聚（
search-form/search-form.css），SMACSS 要求归类集中（states/is-disabled.css），构建时靠 PostCSS 或 Webpack 合并，不冲突 - 关键约束点在于：BEM 不允许元素嵌套（
card__title__icon是反模式），而 SMACSS 对嵌套没限制，但组合太多类名（card-title-icon is-small has-border theme-dark）会降低可读性
真正难的是类名语义边界的判断——card__image--rounded 是 BEM 修饰符，还是该抽成 SMACSS 的 is-rounded？这没有标准答案，取决于你是否愿意为“圆角”这个视觉特征单独维护一套状态规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
