前言
在日常开发过程中,团队成员的 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;
来实现垂直居中。
float
浮动属性的目的本来只是为了实现图片和文字的环绕效果,用来做布局会有如下几个副作用:
- 元素文字之间不是根据基线对齐的。
- 浮动元素的高度不计入父元素高度计算。
z-index
这个属性可以控制元素的显示层级,越大显示越靠前。但是其实远没这么简单。
有如下一段代码
因为给 b 设置了 负的margin
,所以,b 会与 a 重叠 。这时,我们想让 a 覆盖 b ,给 a 设置一个 z-index:999
。结果发现,并没有任何作用。b 还是稳稳的盖在了 a 的上面。
我们再给 a 加一个属性。position:relative;
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
。
具体可以查看 深入理解文字高度和行高的设置