写完这个微信风格按钮页面，我终于吃透了BEM命名+CSS重置

之前写页面一直有两个痛点，折磨我好久。

一是class命名，每次都绞尽脑汁瞎编，写一个页面能冒出十几种命名风格，后续改代码完全找不到对应样式；二是页面默认样式乱飞，不同标签自带边距、行高，每次都要手动微调，越写越乱。

直到这次手写一套微信风格的按钮页面，全程用规范写法落地，才算彻底搞懂了 CSS Reset 和 BEM命名规范 的真正用处，不是死板的八股文，是真的能救命的开发套路。

先说说最基础的：为什么坚决不用 * 通配符重置样式？

我之前图省事，重置样式永远一行代码搞定：

js 复制代码

/* 千万别再这么写了！ */
* {
    margin: 0;
    padding: 0;
}

当时觉得万能，直到慢慢踩坑才发现问题。

说实话，通配符是贪婪匹配，会把页面所有标签全部遍历一遍，不管你有没有默认样式，统统重置。页面标签少的时候没感觉，项目复杂后，性能损耗肉眼可见。

而且最坑的一点：很多原生标签的默认有用样式会被一刀切干掉，后续还要自己额外补样式，纯属多此一举。

现在我彻底换成了行业通用的「全元素枚举重置方案」，也就是我这次代码里用的规范写法。

css 复制代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

这套写法的核心逻辑特别简单：只重置有默认样式的标签，精准清洗，不瞎遍历。

相当于把浏览器自带的乱七八糟的默认样式，全部抹平，把页面变成一张干净的白纸，后续所有样式都由我们自己掌控，不会出现莫名其妙的边距、偏移。

小补充：这也是 normalize.css 的核心思路，不暴力通配，精准重置、兼容所有浏览器的样式差异。

另外我还补了几个高频元素的通用重置，解决日常开发90%的兼容问题：

css 复制代码

/* HTML5新标签统一转为块级元素，兼容旧浏览器 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* 清除列表默认样式 */
ol, ul {
  list-style: none;
}

/* 清除超链接默认下划线、默认颜色继承父级 */
a {
  text-decoration: none;
  color: inherit;
}

/* 表单元素统一继承字体，清除默认边框和外发光 */
button, input, select, textarea {
  font: inherit;
  background: transparent;
  border: none;
  outline: none;
}

告别瞎命名！BEM 规范真的太香了

以前写class，完全是随心所欲。头部就写top、header，主体就写main、content，写着写着命名全乱，复用和改代码都巨麻烦。

这次写页面全程用BEM 国际命名规范，写完瞬间明白，为什么大厂全都强制用这套规则------它根本不是约束，是开发提速神器。

先用人话翻译一下BEM的核心逻辑，不用记官方定义：

B（Block 区块） ：独立的、可以单独复用的大模块，比如我页面里的 page 整个页面区块、weui-btn 按钮模块
E（Element 元素） ：区块内部的子元素，不能独立存在，用 __ 连接，比如 page__hd 页面头部、page__bd 页面主体
M（Modifier 修饰符） ：用来区分同一模块的不同状态/样式，用 _ 连接，比如 weui-btn_primary 主按钮、weui-btn_default 次要按钮

放一下我这次写的完整结构，一眼就能看懂：

xml 复制代码

<!-- BEM规范完整结构演示 -->
<div class="page"> <!-- 大区块 Block -->
    <header class="page__hd"><!-- 区块内元素 Element -->
        <h1 class="page__title">这是一个页面</h1>
        <p class="page__desc">这是一个页面的描述</p>
    </header>
    <main class="page__bd"><!-- 区块内元素 Element -->
        <div class="button-sp-area">
            <a href="#" class="weui-btn weui-btn_primary">主要按钮</a> <!-- 修饰符 Modifier -->
            <a href="#" class="weui-btn weui-btn_default">次要按钮</a>
        </div>
    </main>
</div>

说说我用下来最直观的几个好处：

第一，结构一目了然 。看到class名就知道层级关系，page__hd 必然属于page区块的头部，不会出现层级混乱的问题。

第二，彻底解决命名困难。不用再绞尽脑汁想复杂英文单词，只需要区分「区块、元素、状态」，简单清晰，团队协作也不会出现命名冲突。

第三，样式复用性拉满。像weui-btn这个按钮组件，只需要通过修饰符区分主次样式，核心样式统一维护，不用重复写代码。

细节拉满！复刻微信UI的小技巧

这次的页面是模仿微信UI的样式，写完发现大厂的UI细节是真的讲究，没有一个数值是乱写的。

最让我印象深刻的就是按钮的行高，设计师标注的line-height: 1.41176471，一开始我懵了，为什么要精确到8位小数？

后来一算才懂：按钮字体大小是17px，设计师要求按钮整体高度24px，24/17 刚好就是这个小数。用相对行高适配不同场景，比固定行高更兼容、更美观。

css 复制代码

.weui-btn {
    position: relative;
    display: block;
    min-width: 184px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    line-height: 1.41176471; /* 重点：24/17 精准适配UI高度 */
    border-radius: 8px;
    -webkit-tap-highlight-color: rgba(0, 0, 0);
    user-select:none;
}

还有一个很实用的细节：-webkit-tap-highlight-color: transparent，清空移动端点击高亮背景，user-select: none 禁止按钮文字选中，都是移动端页面的必备细节。

另外我用到了一个很省心的选择器，专门处理按钮间距：

css 复制代码

/* 只给后面的按钮加上边距，避免第一个按钮顶部多余间距 */
.weui-btn+.weui-btn {
    margin-top: 12px;
}

相邻兄弟选择器真的太好用了，不用额外加class，就能统一处理同类元素的间距，页面更整洁。

我踩过的两个低级坑

这次写的过程中，两个坑卡了我不少时间，分享出来大家直接避开：

坑1：忘记给根标签设置高度

一开始写完样式，页面高度塌陷，背景色只铺满内容区域。排查半天发现，没有给html、body设置满屏高度。

正确姿势：全局设置视口高度，保证页面满屏展示

css 复制代码

html, body {
    height: 100vh;
    background-color: #ededed;
}

坑2：混淆BEM的连接符

刚开始写的时候，把元素和修饰符的符号写混了，用 page-hd、weui-btn__primary，导致样式全部不生效。

记死这个规则就不会错：区块和子元素用双下划线 __，模块和状态修饰符用单下划线 _ 。

最后梳理下这次的核心收获

折腾完这一整套代码，不再是只会抄代码的小白，对页面布局和CSS规范有了实打实的认知：

CSS Reset 拒绝暴力通配符，枚举标签精准重置，兼顾性能和兼容性，是正式项目的唯一选择。
BEM 规范是前端必备基本功，不是花架子，能彻底解决命名混乱、层级不清、样式难复用的问题，团队协作效率翻倍。
UI细节决定页面质感，看似奇怪的小数行高、间距、移动端适配属性，都是为了还原设计师的精准效果。

当然也想说一句，BEM不是万能的。简单的静态页面、个人demo页面没必要强行用，过度规范反而累赘。但企业项目、复用性高的组件、团队协作项目，一定要坚持用，收益真的巨大。

如果你之前也跟我一样，写样式全靠瞎写、命名全靠随缘，建议亲手敲一遍这套代码，跑完绝对有不一样的感悟。

搞懂的朋友可以评论区留个言，说说你之前踩过的CSS命名的坑，一起交流下～