如何管理 CSS “内裤”

原创声明

本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 ( id: yuewen_YFE ) 获取授权,并注明作者、出处和链接。

修正于 2018-10-21。为了文章生动,之前用了太多过于夸张的修饰手法,以至于让很多朋友忽略了内容本身。基于网友的评论和指出的不足。略微修改了文风,删除了多余的废话,梳理了文章大纲。

命名是我认为 CSS 里最难的问题没有之一。

CSS 是一个不强调逻辑,而更侧重表现的一门所见即所得的语言。你写了一个属性它就有一个样式,就好比嗑瓜子,你每嗑一下都能及时的得到一个奖励。这种愉悦感是别的开发语言所不具备的。

CSS 也不像其它侧重逻辑的语言,有比较多的代码管理方式。你能管理 CSS 的工具只有两个,一个是文件引用,另一个是命名。通常为了减少页面 HTTP 的请求,我们会尽可能的将 CSS 文件合并。于是靠文件引用这个方式来管理 CSS 的这条路也就显得特别的窄了。

我们都知道 CSS 的作用域是全局的,只要你引用了一个 CSS 文件,它就会影响你整个页面。于是,CSS代码管理的重任就全压在了命名这一条路上。

所以简单的说,你能搞定 CSS 的命名,就能管理好 CSS。

管理 CSS 就好比管理“内裤”

对于 CSS 的管理,我这边举个不恰当但是很贴切的类比,就是类似于日常生活中内裤的管理,是的就是日常穿的内裤,和 CSS 中的“类库”谐音(我太有才了)。

前面有讲到,对于 CSS 的管理我们基本只能通过命名的方式去管理。这听起来似乎是一件值得开心的事,因为只有一条路,所以大家都没得选。然而出乎我们意料的是,即使只有一条路,大家也是走得五花八门。

举个例子,比如我们有 7 条不一样的内裤,如果只用命名的方式去管理内裤,会出现多少种可能?

就像一千个读者就有一千个哈姆雷特一样,不同的人对于同一件事物的命名方式是不一样的。因为对于自己喜欢和熟悉的东西,对于其它的人来说都基本上是不熟悉的。不信你可以问问你的同事,你们归纳和命名内裤的方式很大概率是不一样的。所以这个的可能性是无限的。

当然如果只有 7 条内裤,你和我的命名方式不一样就不一样呗,我只要能看懂基本也就还好。可是,当我们对于内裤的管理上升到了的概念的时候,一切就没有那么容易了。

假设你爸是挖矿的,你家很有钱。而你又特别喜欢买内裤,赤,橙,黄,绿,青,蓝,紫,彩色的,蕾丝的,莫代尔的,纯棉的,紧身的… 各式各样的内裤共计 100 ,请问你要怎么命名这 100 条内裤?

此时你会发现上面管理 7 条内裤的方式,任意一个方式都显得力不从心。所以要怎么办呢?

管理 CSS “内裤” 的通用方法

之前有讲到,管理 CSS 的问题就是 CSS 命名的问题。所以我们看看目前现有的最流行的解决 CSS 命名的通用解决方案 BEM。

因为我不是 BEM 的拥护者,之前举的例子被网友评论打脸了,这边就直接讲结果吧。

很直观的可以看到引用了 BEM 之后,我们的 CSS 就有了,三级的作用域。这个怎么解释呢?

很简单,之前我们命名 7 条内裤的方式是一维的。但是用 BEM 之后,可以看作是一个长宽高各 10 的三维立方体。你要找一个东西,你只需要知道对应的长宽高对应的坐标就能找到。类似:

是不是一下子就简单了很多。BEM 系统的解决了 CSS 的命名问题,并且它的维护性和拓展性也是非常棒。所以它是非常值得推荐的管理 CSS 代码的解决方案。感兴趣的同学可以下来自己了解一下。

这里呢,我是想说是我不喜欢 BEM 的点(感觉又要打脸了)。与其说不喜欢 BEM,倒不如说我连 CSS 命名本身都不喜欢。为什么这么说呢?因为对我来说命名真是一件非常痛苦的事情。

在我写代码的时候经常会遇到这样的问题,有两个非常像的模块,但是它们又有些许的不同,为了公用他们相同的样式,你又必须将这部分抽象出来,可是抽象出来的这个部分,又不能倾向于这两者其中一个,你要怎么命名呢?就好比:

你想为上面这两条内裤公共的部分抽象一个通用的类,请问要怎么命名?然后更可怕的是,此时又来了第三条内裤:

然后你又发现,之前好不容易命名好的通用类名,不能用到这第三条内裤上。然而第二条内裤和第三条内裤又有了公用的部分,这部分是不是又可以进一步抽像呢?一旦抽象,就意味着又要取一个名字,然而此时你又该怎么取名呢?这次拓展两步,我的已经崩溃了。

当然在实际开发中,我相信大家有更优秀的命名方式,来解决这个实际的问题。这里只是用这种夸张的方式来证明命名是一件非常不容易的事情(不用较真我的使用姿势是否正确)。

你要的是内裤,不是内裤放在哪里

我们每次找不到自己内裤的时候,会本能问:“妈!我昨天穿的那条内裤在哪儿啊?”

妈妈通常会不耐烦的回答:“昨天不就告诉你了在第一个柜子的第二个抽屉,这样的问题你到底还要问几遍?”

“第一个柜子第二抽屉”,这听起来很像 BEM 命名的 的方式,当然它能非常简单直白的告诉你内裤放在哪里。

可是不知道大家有没有想过这样的问题,如果我们问:“妈!我昨天穿的那条内裤在哪儿啊?” 啪!你妈妈直接就把内裤扔你脸上了,这种方式是不是才是我们更希望看到的结果。是的,要啥内裤坐标啊,直接把内裤给我不就好了。我要的是内裤,不是内裤放在哪里。

CSS 是什么?CSS 是层叠样式表,而(类名)显然不是,它只是 CSS 和 HTML 之间的钩子

这些东西,才是真正意义上的我们想要的“内裤”的样式。而只是一个告诉你 “内裤” 放在哪儿的坐标。

那在实际开发过程中,怎么样才算是想要内裤的时候,内裤就出现在我们手中呢?

是的,通过直接写 CSS 属性,就能简单粗暴的把“内裤放到别人手中”。而这也是我认为最符合 CSS “所见即所得” 的方式。

想要什么样式我就写什么样式,不用花时间去为我的样式创建一个自认为很好看,但是别人看不懂的类名。我也不用考虑命名污染的问题,因为根本连命名都没有。也正因为连命名都没有,所以也不需要纠结上面提到的任何关于命名让人头疼的问题。

只是因为我们大家都太习惯创建了,导致我们在写样式的时候,第一步想不是样式本身而是创建一个。在我看来这是有一点本末倒置的。

总结一下就是:当我想要“内裤”的时候,我希望的是“内裤”就直接出现在我的手里,而不是得到一个能精确告诉我“内裤”放在哪里的坐标。不管这个坐标的命名规则听起来是有多么的好。

一旦有了命名,我在管理 100 条“内裤”的同时,还得管理比“内裤”本身量级更复杂的这 100 个类名。

管理内裤的原材料而不是内裤

我们之所以会需要去管理代码,很大一部分原因是因为我们想要去复用它造成的。简单的来说,现买现用,穿完就扔的内裤,是不需要你花时间和精力去管理的。

上一节中我们放弃了复用样式这个想法,利用inline css,在解决代码管理问题的同时,还得到了一种将重心聚焦在 CSS 样式本身的编程体验。

正是因为我们放弃了命名,所以才解决了代码管理问题,可是想要复用就必定意味着要命名。这听起来似乎是一个悖论。

那有没有一种方式是可以跳出这个怪圈的呢?答案当然是有的,那就是放弃管理“内裤”,而是转向去管理“内裤”的原材料。我们将之前需要管理的 100 条内裤的原材料列举如下:

布类型:棉,麻,涤纶,氨纶,莫代尔…

颜色:赤,橙,黄,绿,青,蓝,紫…

基于之前的例子,我们现在的代码会变成什么样的呢?

首先,因为这些原材料都已经是不能拆分的最小单元,所以他们的名字能非常容易的固化下来,形成一个通用的“类库”。每次创建新项目的时候,你只需要略微的修改就可以复用起来。

虽然为了解决样式复用的问题我们还是有创建类名,但因为这些命名是不可以拆分并且容易固化的,所以管理的难度会小很多。并且随着,时间的推移,原材料的膨胀率是非常小的。组件化如果做得好,原材料甚至可以做到只减不增。

更惊奇的是,这些原材料可不只用于内裤上,它还可以应用到衣服,裤子,鞋子…等等一系列的东西上。你甚至可以用这个原材料,把一匹马涂成红色。这就是我们视角改变了之后,整个思维方式的巨大改变。而是将复用发挥到极致。

这种将样式原子化的思维方式,是来自雅虎团队的Atomic CSS(简称 ACSS )。毫不吹嘘的说,基于这套理论,我是我遇到的前端程序员中 CSS 原型稿写的最快的程序员(可能我认识的人本来就不多)。

在这里有必要解释一下,我全篇所有的论证都是基于“库”的概念的。如果你只是创建一个简单的运营活动页 ACSS 那你只能用到 ACSS这一个特性,而它更大的优势代码管理这一块是体现不出来的。

因为组件化思维正是当下最流行的时候。而 ACSS 是和组件化思维特别 Match 的一种方式。所以特别希望 ACSS 能被大家看到。当然个人能力有限,如果不恰当的地方可以给我留言,我们一起探讨。

内裤是工业品不是艺术品

到这里可能有的同学会说,你这个原材料拆分的明显没对,布类型不是还有竹炭纤维,甚至太空材料的,颜色还有红蓝渐变或者五彩斑斓的黑。

对于我们大多数男性程序员来说,内裤无非就是棉的和不是棉的两种,颜色无非就是黑,白,灰。即使不是程序员,你也很难会发现,普通的人会买到,赤,橙,黄,绿,青,蓝,紫这么多种颜色的内裤。

举这个例子是想说明什么,内裤是工业品而不是艺术品。工业品注定会控制原材料的种类以降低成本的。而真正会把内裤当艺术品的人,也就不会因为没钱,而不会去考虑复用内裤的问题。

在我们网页的开发也是一样的,如果你的网站不是走艺术类的网站,你却发现你的原材料提供商(设计师),光是从颜色上就给你提供了超过了十几二十几种颜色,那他一定是有问题的。

如果你的设计师,是对自己的设计语言是有极致约束能力的,那对于我们开发者来说这真的是一件非常开心的事情。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181022G144QF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券