前言

在日常开发过程中，团队成员的 CSS 写法多样，不同成员会有不同的命名方式，造成整体的样式结构比较混乱，同时，由于对 CSS 的部分认知有点偏差，写出来的样式代码健壮性不高，且难以维护。因此，本文提供了一个基础的指南和规范，让团队的同学在编写 CSS 代码之前能有一个简单的参考。

本文主要分为两部分，第一部分为基础的命名规范，第二部分为一些容易导致认知偏差的基础知识。

BEM 命名规范

类命名上应当采用 BEM 规范，通常遵循以下模版。

.type-block__element--modifier

type

该属性规定一个类名的类型。我们做如下约定：

.c-block__element--modifier 代表一个组件
.o-block__element--modifier 代表一个不可分割组件
.dt-antd-block__element--modifier 代表自定义 antd 元素样式
js-block__element 代表这是一个脚本依赖的类名。

block，element，modifier

这边我们用一个例子来说明。

Html结构如下

<ul class='c-list'>
  <li class='c-list__li'>1</li>
  <li class='c-list__li c-list__li--highlight'>2</li>
  <li class='c-list__li'>3</li>
  <li class='c-list__li'>4</li>
  <li class='c-list__li'>5</li>
</ul>

整个 list 是一个 block，而每个 li 元素其实就是一个 element，所以我们用了 c-list 来表示 list，用 c-list__li 来表示每一个 li 元素，同时，用了 c-list__li--highlight 来表示需要高亮的元素。

CSS 常见误区与基础

height

设置 height 百分比属性的时候，父元素必须有一个 height 属性（max-height 也不行）或者为高度可确认的绝对定位元素。

padding

padding-top 和 padding-bottom 只会对块级元素生效。
padding 百分比 属性是相对于父元素的宽度。
请不要用 padding-top: ??px; 来实现垂直居中。

CSS 垂直置中的七個方法

float

浮动属性的目的本来只是为了实现图片和文字的环绕效果，用来做布局会有如下几个副作用：

元素文字之间不是根据基线对齐的。
浮动元素的高度不计入父元素高度计算。

z-index

这个属性可以控制元素的显示层级，越大显示越靠前。但是其实远没这么简单。

有如下一段代码

因为给 b 设置了负的 margin，所以，b 会与 a 重叠。这时，我们想让 a 覆盖 b ，给 a 设置一个 z-index：999。结果发现，并没有任何作用。b 还是稳稳的盖在了 a 的上面。

我们再给 a 加一个属性。position：relative；

a 成功盖住了 b。有点经验的同学应该知道，z-index 只在已定位元素上才会生效。所以这边，加上了定位属性才能得到预期的效果。

我们再改一下代码。

我们去除了 定位属性 和 z-index 属性，加上了一个 transform 属性。结果发现，a 还是盖住了 b 。这边没有定位属性，也 没有 z-index，为什么 a 还是会盖住 b 呢？

不清楚的同学可以看一下这篇文章 CSS Stacking Context里那些鲜为人知的坑

font-size

误区：字体内容高度不等于font-size

我们设置了 字体大小 和行高为 20px，但是，浏览器实际显示区域为 28px。这个具体的大小和字体类型是有关系的。

line-height

我们来看一个例子来说明这个属性

这边有两个问题

我们设置了 text 的行高为 50px，但是，他的内容区域实际只有 28px。而且，根据父元素的背景色可以知道，计算时候的区域高度其实达到了 50px。
为什么会垂直居中？

可以用一张图来解释。

因为内容区域为 28px，但是行高为 50px，所以，多出来的 22px 会平均分布于内容区域的上下两侧，从而使得内容区域居中。因为行内框只是一个布局时的概念，并不会实际显示出来，所以我们右键选择的其实是内容区域，高度只有 28px。

具体可以查看深入理解文字高度和行高的设置