今天咱们聊聊 BEM，哈哈，别说我没提醒你，这玩意儿Neng把命名的乱麻瞬间理清。

先说个痛点：命名混乱的噩梦

你是不是经常在项目里抓狂，类名像《天龙八部》一样层层叠叠？

“按钮啊”“按钮__激活”“btn‑primary‑big‑hover”……

说实话，我也曾被这些名字逼疯，代码审查时老是被同事挑刺。

结果呢？维护成本飙升，改一个样式要翻遍整个仓库。

BEM 来拯救！

Block+ Element+ Modifier，听起来有点技术味，但其实超好用。

块——页面的大模块，比如 .header、.card。

元素——块内部的子部件，用双下划线区分，比如 .header__logo。

修饰符——状态或变体，用双破折号标记，比如 .button--primary。

咱就是说这套规则让类名一次就Neng表达清楚“谁是谁”，省得后面再解释。

一步步把页面拆成 BEM 块

先把页面结构画出来：头部、内容区、底部。

每个区域dou是一个 Block。

    …
    
…
    …

元素与修饰符的巧妙组合

比如导航里的每个链接是元素：.nav__link。

想要高亮当前页？加个修饰符：.nav__link--active。

Ru果还有小图标，要放在链接里那就是另一个元素：.nav__icon。

实战案例：一个卡片组件

先写Zui基础的块：

    标题
    
描述文字

注意，按钮用了块本身的元素 + 修饰符，这样一眼就Nengkan出它是卡片里的按钮，而且是主要按钮。

BEM 与 CSS 重置的配合技巧

先来一段极简重置，让浏览器默认样式不再干扰：

*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:100%;}
body{font-family:sans-serif;background:#f5f5f5;}
button{border:none;background:none;font:inherit;color:inherit;}

重置完后再写 BEM 样式。因为类名Yi经hen明确，选择器Ke以保持低特异性：

.card{background:#fff;border-radius:8px;padding:16px;}
.card__title{font-size:1.25rem;margin-bottom:.5rem;}
.card__desc{color:#666;font-size:.9rem;margin-bottom:1rem;}
.card__btn{display:inline-block;padding:.5em 1em;border-radius:4px;text-align:center;}
.card__btn--primary{background:#007bff;color:#fff;}

为什么百度不收录？

咱们说正经事儿，有时候页面写得好kan，但搜索引擎却不理睬——这就是“为什么百度不收录”。答案其实hen直接：

页面缺少有效的 和