在写 CSS 以前你应该了解的一些东西

前言

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

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

BEM 命名规范

类命名上应当采用 BEM 规范，一般遵循如下模版。

.type-block__element--modifier
复制代码

type

该属性规定一个类名的类型。 咱们作以下约定：

1. .c-block__element--modifier 表明一个组件
2. .o-block__element--modifier 表明一个不可分割组件
3. .dt-antd-block__element--modifier 表明自定义 antd 元素样式
4. 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

1. padding-top 和 padding-bottom 只会对块级元素生效。

   

2. padding 百分比 属性是相对于父元素的宽度。

3. 请不要用 padding-top: ??px; 来实现垂直居中。

   CSS 垂直置中的七個方法

float

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

1. 元素文字之间不是根据基线对齐的。

   

2. 浮动元素的高度不计入父元素高度计算。

   

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

咱们来看一个例子来讲明这个属性

这边有两个问题

1. 咱们设置了 text 的行高为 50px，可是，他的内容区域实际只有 28px。并且，根据父元素的背景色能够知道，计算时候的区域高度其实达到了 50px。
2. 为何会垂直居中？

能够用一张图来解释。

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

具体能够查看 深刻理解文字高度和行高的设置