# 从重置样式到 BEM 命名：写一个微信的按钮

一个按钮，看起来简单，

但背后有 CSS Reset、BEM 规范、行高计算......

一、为什么页面要先"重置样式"？

打开浏览器，写一个 <h1>，它自带上下边距和加粗；写一个 <ul>，它自带左边距和圆点。不同浏览器的默认样式还不一样------Chrome 和 Firefox 可能差几个像素。

如果你直接写业务样式，就像在别人的涂鸦上接着画，最后乱七八糟。

所以第一件事：把页面变成一张干净的白纸 。这叫 CSS Reset（重置样式）。

一种常见的写法是通配符：

css

css 复制代码

* {
  margin: 0;
  padding: 0;
}

但我了解到，这种写法虽然简单，但性能不好。浏览器要把页面里每一个元素 都匹配一遍，量越大越慢。而且它会覆盖所有元素的默认样式，有些你其实想保留（比如 button 的默认交互）。

更专业的做法是：列出一大串元素，逐一重置。

css

css 复制代码

html, body, div, span, h1, h2, ... 很多很多 {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

我学习到，这种长列表是从老牌 Reset 样式里继承下来的，稳定可靠。还加了 box-sizing: border-box，让宽度计算更符合直觉（padding 和 border 不额外撑开宽度）。

另外，HTML5 新增的语义化标签（article、aside、header 等）在旧浏览器里默认是行内元素，需要手动设成 block：

css

css 复制代码

article, aside, footer, header, section {
  display: block;
}

重置完之后，所有元素的边距清零，字体大小统一，盒子模型一致。我就可以放心地从零开始写样式了。

顺便一提：也可以直接用 normalize.css，它不只重置，还保留了有用的默认样式。

二、BEM 命名规范：让类名不再乱糟糟

以前写 CSS，我常常随便起名：.btn、.btn1、.red-button......项目一大就乱。

后来我学习到 BEM（Block Element Modifier），这是国际通用的命名规范。

核心规则：

Block（块） ：独立的组件，比如 .page、.weui-btn
Element（元素） ：块的一部分，用 __ 连接，如 .page__hd、.page__title
Modifier（修饰符） ：不同的状态或变体，用 -- 连接，如 .weui-btn_primary（主要按钮）、.weui-btn_disabled（禁用状态）

我看到的代码是这样的：

html

ini 复制代码

<div class="page">
  <header class="page__hd">
    <h1 class="page__title">这是一个页面</h1>
    <p class="page__desc">这是一个页面的描述</p>
  </header>
  <main class="page__bd">
    ...
  </main>
</div>

page 是一个块
page__hd、page__bd、page__title、page__desc 都是它的元素

再看按钮：

html

ini 复制代码

<a href="" class="weui-btn weui-btn_primary">主要按钮</a>
<a href="" class="weui-btn weui-btn_default">次要按钮</a>

weui-btn 是块（按钮组件）
weui-btn_primary、weui-btn_default 是修饰符（主要按钮和次要按钮）

BEM 的好处我总结了一下：

一看类名就知道它是块、元素还是状态
不会有命名冲突（因为用了双下划线/双连字符）
适合多人协作，结构清晰
解决了"起名字难"的问题------就用最简单的英文单词，跟着结构走

三、微信按钮的设计细节

我在学习过程中注意到一个细节：微信的按钮尺寸和行高有精确的小数。

css

css 复制代码

.weui-btn {
  padding: 12px 24px;
  font-size: 17px;
  line-height: 1.41176471;   /* 24 / 17 = 1.411764705882353 */
}

line-height 为什么不是 24px，而是 1.41176471？

我了解到，用无单位的数值更灵活：无论字体大小怎么变，行高总是字体的 1.4117 倍。设计师标注的按钮高度是 24px，字体 17px，所以行高 = 24 / 17 = 1.41176471。

这种精确到小数点后八位的写法，不是"过度设计"，而是把设计稿精确还原。我体会到，大厂 UI 对细节的执着，就体现在这里。

其他我学到的细节：

按钮最小宽度 184px，最大 280px，确保在不同屏幕上的表现
圆角 8px，现代感
文字颜色白色，背景绿色 #07c160（微信品牌色）
次要按钮背景 rgba(0,0,0,0.1)，半透明黑色，比灰色更柔和

四、相邻兄弟选择器：处理按钮之间的间距

我看到了一个很巧妙的写法：

css

css 复制代码

.weui-btn + .weui-btn {
  margin-top: 15px;
}

+ 是相邻兄弟选择器。它选择紧跟在后面的那个兄弟元素。

假设有两个按钮：

html

ini 复制代码

<a class="weui-btn weui-btn_primary">主要</a>
<a class="weui-btn weui-btn_default">次要</a>

第二个按钮会有一个 margin-top: 15px，而第一个没有。这样无论按钮数量多少，从上到下排列时，只有非第一个的按钮有上边距。

我学习到，这比给每个按钮都加 margin-top 再减去第一个的更优雅。这种写法在列表、按钮组、表单里很常用。

五、整体布局：`position: absolute` 全屏

我发现了一个全屏布局的写法：

css

css 复制代码

.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这是让一个元素铺满整个视口（viewport）的经典写法。position: absolute 相对于最近的定位祖先，如果没有，就相对于 <html>。四个方向都设 0，就拉伸到完全覆盖。

我还学到了一个调试小技巧：临时加个亮色背景，可以看清元素的位置和大小，方便调试。有人把这叫"背景调试大法"。

六、业务样式里容易踩的坑

我在看代码时发现了几个小错误，正好提醒自己以后要细心：

css

css 复制代码

.page__title{
    text_align:left;   /* 应该是 text-align */
    font-size: 2px;    /* 2px 太小了，应该是 20px 或 2rem？ */
}

.page__desc{
    marrgin-top:4px;   /* 应该是 margin-top */
}

这些错让我意识到：写 CSS 要细心，一个字母拼错，样式就不生效。以后写完要多检查一遍。

七、从这次练习学到的

CSS Reset ：先清空默认样式，再动手写业务样式。通配符简单但性能差，列元素列表更专业。也可以直接用 normalize.css。
BEM 命名 ：.block__element--modifier，结构清晰，避免冲突。解决"起名困难症"。
精确的设计还原：行高用除法计算，按钮尺寸按设计稿来，大厂对细节很执着。
相邻兄弟选择器 ：+ 很实用，处理列表项间距比加类名更干净。
调试技巧：临时加背景色看布局，很有用。

这些内容单独看都不难，但组合起来就能写出像微信那样"看起来很舒服"的界面。我慢慢理解了：一个按钮的背后，不是一行 CSS，而是一套工程化的思维。

# 从重置样式到 BEM 命名：写一个微信的按钮

一、为什么页面要先"重置样式"？

二、BEM 命名规范：让类名不再乱糟糟

三、微信按钮的设计细节

四、相邻兄弟选择器：处理按钮之间的间距

五、整体布局：position: absolute 全屏

六、业务样式里容易踩的坑

七、从这次练习学到的

五、整体布局：`position: absolute` 全屏