1 min read

CSS 修饰类

一个页面内容,如果它在结构上属于副标题,那么从语义上说,我们应该用 <h2></h2> 标签对来包含它。可以想像,副标题的字体大小比正文要大,并且加粗。那么,在定义 CSS 样式时,我们可能是这样写的:

h2,
.h2 {
  font-size:18px;
  font-weight:700;
}

但很可惜,设计人员出于排版或其他想法,决定某些副标题不加粗。

因为 h2 标题加粗是存在共识的,所以我们上面写的基类(base class)并没有问题 – 如果基类设定了副标题不加粗,那反而会给人造成困惑。

基于基类,我们可以有两种解决办法,

  1. 创建一个 h2 变体样式类:

    .h2--fw-normal{
      font-weight:400;
    }
    

    然后应用到元素中:

    <h2 class="h2 h2--fw-normal">副标题</h2>
    
  2. 又或者我们考虑添加一个专门设定 font-weight 的类:

    .fw-normal{
      font-weight:400;
    }
    

    然后再应用到元素中:

    <h2 class="h2 fw-normal">副标题</h2>
    

无论是第一种还是第二种方法,都能在 HTML 中起到辅助语义的作用,但第一种方法因为限定命名空间 h2,所以该类样式并不能应用到其他结构元素上,第二种方法则相反,可重用性很高。

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo