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

971 阅读4分钟

前言

在日常开发过程中,团队成员的 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-toppadding-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

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