什么鬼，又不知道怎么命名class了

本文由IMWeb首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。

相信写css的人都会遇到下面的问题：

于是就有了下面的做法：

由此可见，class的命名真不是一件简单的事，尤其还要兼顾可辨别性与可读性。

class命名到底有多难

第一，class跟id不一样，class本来就是设计用来可以重复利用的，而id才是设计唯一的（如果遵循BEM，class几乎也都是唯一的了）。

第二，样式是可以覆盖的，而且先按照权重，再按照定义的先后顺序。也许你花了十分钟设计定义的一个class样式，人家分分钟就给你干掉了，这得多恼火；也许这个页面好好的，跑到另一个页面就跟原先的样式有了冲突。

所以class命名的难就难在既要重复利用，又要避免样式的冲突。如果要重复利用，那么当然是越简单越好，越抽象可用的地方越大，太具体了就完蛋了。而如果要避免样式冲突。BEM的方式最简单，class都唯一了，那还冲突个毛线；其次就是通过父元素限定作用域，可以搞几个层级，而不是单独一个class定义样式；还有就是追加class，来实现差异化；最后不同的页面不同的文件，你用你的我用我的。

// BEM
.imgslide__item__img{}

// 父元素限定
.imgslide .item .img{}

// 追加class
.img{}
.img--special{}

// 不同页面不同文件
// a.html & a.css
.img{}
// b.html & b.css
.img{}

总之，不管有多难，我们还是得试试去解决问题，去寻找一些规律。

class命名的发展历程

关于class的命名，其实跟人名也差不多，如果要想别人看得懂，那关键还是在于可识别性。到目前为止class的命名大概经历了下面几个重要阶段：

混沌阶段

这个没什么好说的，刚开始学html的都是这样，名字先简单的来，不够再添加1，2，3什么后缀，或者中英混搭等等，如下：

h1.title
h2.title2
h2.title2-1
h2.title2-2
div.hd
div.hd-s
div.hd2
div.hd-xiangxi

一个字，太乱。完全无章程，规律可循，想怎么写就怎么写，写到哪里是哪里。看class去猜意思很可能就是错误的，如 .red{color:red;font-size:14px;}，明明说好的红色，却顺带定义了个字体大小。

原子类阶段

这个关键在于拼凑组合，足够多的原子类拼成一个完整的样式：

.fl{float:left;}
.fr{float:right;}
.pr{position:relative;}
.pa{position:absolute;}
.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}
.fs12{font-size:12px;}

div.fs12.fl.pr.tac
div.pa.tal

这种有两个缺点，第一是稍微复杂点的样式都要使用很多class组合，第二是如果要修改样式的时候得修改html文件，而不是css样式，而纯静态的页面是很少的，所以如果是前后端分离的，由php或后端语言渲染页面的话，改个样式还要通知后端同事去修改文件，那估计人家得疯掉。

模块阶段

到了这个时候，css经过这么多年的发展，页面的复杂性已经翻了好几倍了，那些无规划的混沌根本不够用，满眼的class看起来长得都差不多，后面全是1，2，3都不知道标到多少了，却不知道到底是啥区别；而原子类已经不适合频繁的修改调整更新，每更新下都是前后齐心协力。于是按职能划分的class命名规则就出现了

// l表示layout,  g表示global,  m表示mod,
.l-960
.l-left
.l-right
.g-red
.g-title
.g-price
.m-login
.m-breadcrumb
.m-slide

这种命名方式在一定程度解决了混乱不堪的问题，所有的按照职能划分看起来很美好，不过动不动加个前缀确实不怎么优雅，再者随着mod的增加，这个以m开头的前缀根本就不够用，于是又乱了，有加二级前缀的，也有另起前缀的。

BEM

这个估计地球上做前端的都知道吧，实在是太火了，所以不用来解释了。优点就是你只管写你自己的，99.99%的几率不会去干掉别人的样式，class实在太长了，能一样那得多高的几率啊。缺点还是class太长，太长，太长，重要的事情说三遍。一般都记不住自己定义的class，写css的时候只好对着去拷贝。然后最痛苦的就是去修改更新，明明很简单的东西，然后你还要搞个超长的class，那叫一个烦躁，想想都懒得动手。

他山之石

其实每个命名的发展经历都有其特定的历史意义，也当然有其价值。所以吸取之长，弃之短缺就很好了。比喻写简单demo的时候，我们就可以用到混沌阶段的命名，足够简单，不需要纠结思考；而原子类尤其是一些简单的样式，如一行代码就可以搞定，起个class名甚是纠结，还不如直接上原子类；至于模块类，说真的应用的场景就更多了，如布局，js操作类等；而BEM我们同样可借鉴其思想，如 .class.class--name使用 --表示特殊化，以区分 -。

这里我们站在前人的肩膀上，试着去开辟一条道路，可以兼顾简洁可读性及可理解辨别性。当然class的简洁肯定离不开关键词的应用，这里我们先来过一遍常见的class关键词。

常见class关键词：

有了关键词之后，我们先来制定一些简单的规则

制定简单规则：

关键词及规则都有了，现在可以进入本文的核心的核心，实战操作。

实战操作

以布局入手，大概结构如下：

header.header>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center

具体可参考HTML整站结构设计()，这里我们可以看出都是些简单的关键词，比较好理解，一看就知道是什么。

现在问题来了，如果其他地方也要用到这些关键词怎么办？

修饰关键词

以header为例，我们可以添加前缀表示不同的header，如区块头部 .block-hd(hd为header简写)，modal头部 .modal-hd，文章头部 .article-hd。

同样标题也可以分为，页面标题 .page-tt(title的简写)，区块标题 .block-tt等。

同样，这给我们提出了第二个问题，如果要特殊化某个class该怎么办？

特殊化class

以上面的tt为例，大概有三种办法：

第一种犯法：直接修改class，将 .page-tt修改成 .page-user-tt(可以采用scss的 %先定义共用的代码)。

第二种办法：追加class特殊化，根据我们上面定义的规则，在 .page-tt上追加一个class成为 .page-tt.page-tt--user，注意 .page-tt--user不是一个独立的class，它是基于 .page-tt这个基础上的。

第三种办法：使用父类，给一个范围，于是形成 .page-user.page-tt。

一般我们使用的是第二种和第三种办法，因为这两种都有共同的 .page-tt，可以比较方便控制一些基础共有的样式。

由第三个通过父类控制的办法，我们进入第三个要讨论的问题，层级结构

层级

最适合层级的例子莫过于 ul>li结构了，如下面的结构：

    
         href="#"> src="" alt="">
        
 href="#">
        
    

一般来说我们也有两种办法定义层级，第一种为继承式，第二种为关键词式。

// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

由上可以看出继承式一般子元素接着父元素的最后一个单词如li接着ul的 list，而li的子元素接着li的 item；至于关键词式则完全由关键词来表示层级， list>item>filed正好构成三层等级。

最后由我们的层级进入我们最后一个问题，如何控制样式的范围

样式范围

这里以腾讯课堂()的课程详细页右边栏为例，如下图：

三个区块的基础框架为：

.aside-block.block--xxx>
    h3.block-tt
    .block-bd

其中 .aside-block.block--xxx用到了我们的特殊化class，而 .block-tt, block-bd则使用了我们的修饰关键词，至于 .aside-block与它的子元素之间则使用了我们上面说的继承式层级。现在根据这个层级结构我们定义基础样式如下：

.aside-block{
    .block-tt{}
    .block-bd{}
}

假设这里的联系机构区块的标题不一样，我们则可以：

.block--contact{
    .block-tt{}
}

当然如果本身有5个区块，2个标题一样，另外三个标题又一样，也许我们就有需要给 .block-tt追加一个特殊化class，或者给 aside-block特殊化一个class，如：

.aside-block{
    .block-tt{
        &.block-tt--special{}
    }
    .block-bd{}
}
// 或
.aside-block{
    &..aside-block--special{
      .block-tt{}
  }
}

基础框架讨论完毕之后，就轮到我们的内容了，以联系机构为例：

使用 ul>li结构，所以样式是另外一个独立的范围，不嵌套在之前的 .aside-block里面，html及css代码如下：

ul.contact-list
    li
        i.item-icon.icon-font.i-xxx
        a.item-tt
        p.gray

这里我们li没有设置class，而p使用了一个全局的class .gray

.gray{}
.contact-list{
    li{}
    .item-icon{}
    .item-tt
}

同理如果我们有其他地方应用这个可以拷贝过去，而如果需要一点调整，我们可以使用父元素来控制，如这里我们可以使用 .block--contact来进一步调整contact的样式，如：

.block--contact{
    .contact-list{
        li{}
    }
}

至此，我们的class命名方法讨论完毕，说到底就是先记住一些必备的基础关键词，然后合理应用上刚才提出的修饰关键词，特殊化class，层级及最后的样式范围就可以了。

小黑侠HOVER 2问世 重新定义人工智能无人机

“Hover 2标志着全自主飞行新时代的到来，真正意义上让用户实现无需学习，开箱即用。零零始终以最领先的设计和最尖端的技术为发展核心，这一代产品的研发投入共计超过了五十万个小时。”

——零零科技创始人王孟秋

在零一科技节上惊艳全场的“网红”无人机Hover Camera，终于出二代了。美国西部时间2018年11月14日，零零科技发布最新旗舰无人机产品Hover 2，并在Kickstarter平台上发起众筹预定。这是Hover系列产品线的延续，使用最尖端的人工智能技术，在消费级无人机领域极具前瞻性和竞争力。

历时两年，120人，耗费50万个工作小时研发，在Hover Camera Passport的基础上提升了空气动力学性能，并且使用了领先的A.I.人工智能技术，全面优化用户体验。

三分钟教你看懂零零无人机新品 Hover 2

零零科技自创的避障系统和世界领先的视觉跟踪算法，只需轻轻一按，即可实现自主飞行和智能拍摄心仪的影像。没有复杂的说明书，上手极快，减少旅途中因烦躁情绪引发的情侣间的争吵。

视觉雷达系统是零零独具创新的旋转立体视觉传感器，它让Hover 2 能够360度深入感知周围环境。结合自主研发的嵌入式人工智能技术，Hover 2可以在动态跟踪目标的同时实现360度全向避障。预设的经典飞行运镜轨迹，能够帮助用户以全新的视角轻松拍摄人生精彩瞬间，打造电影级的视觉效果。Hover 2还采用了高通® 骁龙™ 旗舰处理器，整体性能比之前提升了四倍。

浪漫旅途须有爱人、美景和好物。小黑侠无人机的高颜值始终在线，Hover 2延续了屡获设计大奖的第一代产品Hover Camera的碳纤维外壳以及可折叠式设计，还另外精心设计了一套航拍替换装，在保障飞行安全的同时提升飞行时间和距离，有效减少风阻。

Hover 2主要技术和产品功能

1/2.3英寸CMOS图像传感器完美呈现4K/1200万高分辨率视频及照片。

360度全向避障，基于零零独创的视觉雷达系统。

智能构图：选择内置的拍摄模式，Hover 2将飞行到指定位置，自动完成构图和拍摄。

多向跟拍：全新升级的视觉跟踪算法大大提升了目标锁定的精度和稳定性，可从正面、背面、侧面多个角度随意跟拍。

经典运镜：软件中预设的经典飞行轨迹，帮助用户一键拍摄出大片级的运镜效果，让自己和朋友成为视频中真正的主角。

大片主题：App中提供多种风格的滤镜、音乐及特效，能够自动生成电影质感的短视频， 也可由用户根据自己的喜好手动编辑，并快速分享。

远距航拍：Hover 2 的航拍组件让用户能够捕捉远距离之外的震撼画面，飞行时间长达23分钟，飞行控制范围可达5公里。

掌上RC：小型单手遥控器配件，可以自动配对、简便控制和自定义快捷方式，实现更简单易用的交互体验。

Hover 2现已登陆Kickstarter平台开启众筹，链接hover.ai/kickstarter，售价399美元起。想了解更多关于Hover 2的内容，请访问Hover.ai。

零零科技

由斯坦福大学博士王孟秋和张通于2014年共同创立，零零是一家极具前瞻性的，致力于研发智能飞行机器人的科技公司。两年前其推出的首款消费级旗舰产品Hover Camera，让用户以独特的视角轻松拍摄生活中精彩的瞬间，得到了全球媒体和公众的广泛关注，获得了红点、iF、CES等国际大奖，还与苹果零售店建立了全球合作伙伴关系。零零科技总部设在北京，并在旧金山、深圳、杭州和台北设有分公司，拥有超过120名员工。其投资方包括IDG，金沙江创投，真格基金等。