如何管理 CSS “内裤”

时间 2019-11-08

标签如何管理 css 栏目 CSS 繁體版

原文原文链接

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

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

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

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

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

因此简单的说，你能搞定 CSS 的命名，就能管理好 CSS。程序员

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

对于 CSS 的管理，我这边举个不恰当可是很贴切的类比，就是相似于平常生活中内裤的管理，是的就是平常穿的内裤，和 CSS 中的“类库”谐音（我太有才了）。github

前面有讲到，对于 CSS 的管理咱们基本只能经过命名的方式去管理。这听起来彷佛是一件值得开心的事，由于只有一条路，因此你们都没得选。然而出乎咱们意料的是，即便只有一条路，你们也是走得五花八门。web

举个例子，好比咱们有 7 条不同的内裤，若是只用命名的方式去管理内裤，会出现多少种可能？npm

按日期	按颜色	按材质	按花纹	...
`.星期一{}`	`.红色{}`	`.纯棉{}`	`.格子{}`	`...`
`.星期二{}`	`.黄色{}`	`.涤纶{}`	`.横条纹{}`	`...`
`.星期三{}`	`.蓝色{}`	`.氨纶{}`	`.波点{}`	`...`
`...`	`...`	`...`	`...`	`...`

就像一千个读者就有一千个哈姆雷特同样，不一样的人对于同一件事物的命名方式是不同的。由于对于本身喜欢和熟悉的东西，对于其它的人来讲都基本上是不熟悉的。不信你能够问问你的同事，大家概括和命名内裤的方式很大几率是不同的。因此这个的可能性是无限的。编程

固然若是只有 7 条内裤，你和个人命名方式不同就不同呗，我只要能看懂基本也就还好。但是，当咱们对于内裤的管理上升到了库的概念的时候，一切就没有那么容易了。

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

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

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

以前有讲到，管理 CSS 的问题就是 CSS 命名的问题。因此咱们看看目前现有的最流行的解决 CSS 命名的通用解决方案 BEM。

由于我不是 BEM 的拥护者，以前举的例子被网友评论打脸了，这边就直接讲结果吧。

.block__element--modifier{ /* */ }
复制代码

很直观的能够看到引用了 BEM 以后，咱们的 CSS 就有了，三级的做用域。这个怎么解释呢？

很简单，以前咱们命名 7 条内裤的方式是一维的。可是用 BEM 以后，能够看做是一个长宽高各 10 的三维立方体。你要找一个东西，你只须要知道对应的长宽高对应的坐标就能找到。相似：

.长1__宽2--高3{ /* */}
复制代码

是否是一会儿就简单了不少。BEM 系统的解决了 CSS 的命名问题，而且它的维护性和拓展性也是很是棒。因此它是很是值得推荐的管理 CSS 代码的解决方案。感兴趣的同窗能够下来本身了解一下。

这里呢，我是想说是我不喜欢 BEM 的点（感受又要打脸了）。与其说不喜欢 BEM，倒不如说我连 CSS 命名自己都不喜欢。为何这么说呢？由于对我来讲命名真是一件很是痛苦的事情。

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

/* 这个例子不是 BEM 的正确使用姿式，这里只是做为参考 */

.柜1__屉2--内裤，.柜2__屉2--内裤{
    名称：贴身的下身内衣；
    大小：中号；
    颜色：粉色；
}
.柜1__屉2--内裤{ 
    适合性别：男； 
}
.柜2__屉2--内裤{ 
    适合性别：女； 
    款式：蕾丝；
}

<div style="柜1__屉2--内裤">一条内裤</div>
<div style="柜2__屉2--内裤">另外一条内裤</div>
复制代码

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

.柜2__屉3--内裤{ 
    名称：贴身的下身内衣；
    大小：中号；
    颜色：红色；
    适合性别：女； 
    款式：蕾丝；
}
<div style="柜2__屉3--内裤">又一条内裤</div>
复制代码

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

固然在实际开发中，我相信你们有更优秀的命名方式，来解决这个实际的问题。这里只是用这种夸张的方式来证实命名是一件很是不容易的事情（不用较真个人使用姿式是否正确）。

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

咱们每次找不到本身内裤的时候，会本能问：“妈！我昨天穿的那条内裤在哪儿啊？”

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

.柜1__屉2--内裤{ 
    名称：贴身的下身内衣；
    大小：中号；
    适合性别：男； 
    颜色：黑色；
}
复制代码

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

但是不知道你们有没有想过这样的问题，若是咱们问：“妈！我昨天穿的那条内裤在哪儿啊？” 啪！你妈妈直接就把内裤扔你脸上了，这种方式是否是才是咱们更但愿看到的结果。是的，要啥内裤坐标啊，直接把内裤给我不就行了。我要的是内裤，不是内裤放在哪里。

CSS 是什么？CSS 是层叠样式表，而 class（类名）显然不是，它只是 CSS 和 HTML 之间的钩子。

名称：贴身的下身内衣；
大小：中号；
适合性别：男； 
颜色：黑色；
复制代码

这些东西，才是真正意义上的咱们想要的“内裤”的样式。而.柜1__屉2--内裤只是一个告诉你 “内裤” 放在哪儿的坐标。

那在实际开发过程当中，怎么样才算是想要内裤的时候，内裤就出如今咱们手中呢？

<div style="名称：贴身的下身内衣；大小：中号；颜色：粉色；适合性别：男；">一条内裤</div>

<div style="名称：贴身的下身内衣；大小：中号；颜色：粉色；适合性别：女；款式：蕾丝；">另外一条内裤</div>
    
<div style="名称：贴身的下身内衣；大小：中号；颜色：红色；适合性别：女；款式：蕾丝；">又一条内裤</div>
复制代码

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

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

只是由于咱们你们都太习惯建立 class 了，致使咱们在写样式的时候，第一步想不是样式自己而是建立一个 class。在我看来这是有一点本末倒置的。

总结一下就是：当我想要“内裤”的时候，我但愿的是“内裤”就直接出如今个人手里，而不是获得一个能精确告诉我“内裤”放在哪里的坐标。无论这个坐标的命名规则听起来是有多么的好。

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

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

咱们之因此会须要去管理代码，很大一部分缘由是由于咱们想要去复用它形成的。简单的来讲，现买现用，穿完就扔的内裤，是不须要你花时间和精力去管理的。

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

正是由于咱们放弃了命名，因此才解决了代码管理问题，但是想要复用就一定意味着要命名。这听起来彷佛是一个悖论。

那有没有一种方式是能够跳出这个怪圈的呢？答案固然是有的，那就是放弃管理“内裤”，而是转向去管理“内裤”的原材料。咱们将以前须要管理的 100 条内裤的原材料列举以下：

布类型：棉，麻，涤纶，氨纶，莫代尔...
颜色：赤，橙，黄，绿，青，蓝，紫...
...

基于以前的例子，咱们如今的代码会变成什么样的呢？

<style> .贴身的下身内衣{ } .中号{ } .男{ } .女{ } .黑色{ } .红色{ } .粉色{ } .蕾丝{ } </style>

<div class="贴身的下身内衣 中号 粉 男">一条内裤</div>
<div class="贴身的下身内衣 中号 粉色 女 蕾丝">另外一条内裤</div>
<div class="贴身的下身内衣 中号 红色 女 蕾丝">又一条内裤</div>
<div class="红色">一匹红色的马</div>
复制代码

首先，由于这些原材料都已是不能拆分的最小单元，因此他们的名字能很是容易的固化下来，造成一个通用的“类库”。每次建立新项目的时候，你只须要略微的修改就能够复用起来。

虽然为了解决样式复用的问题咱们仍是有建立类名，但由于这些命名是不能够拆分而且容易固化的，因此管理的难度会小不少。而且随着，时间的推移，原材料的膨胀率是很是小的。组件化若是作得好，原材料甚至能够作到只减不增。

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

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

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

由于组件化思惟正是当下最流行的时候。而 ACSS 是和组件化思惟特别 Match 的一种方式。因此特别但愿 ACSS 能被你们看到。固然我的能力有限，若是不恰当的地方能够给我留言，咱们一块儿探讨。

内裤是工业品不是艺术品

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

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

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

在咱们网页的开发也是同样的，若是你的网站不是走艺术类的网站，你却发现你的原材料提供商（设计师），光是从颜色上就给你提供了超过了十几二十几种颜色，那他必定是有问题的。

若是你的设计师，是对本身的设计语言是有极致约束能力的，那对于咱们开发者来讲这真的是一件很是开心的事情。

解决方案

更新于 2019/10/22

名称	NPM	github	CDN
`@_nu/css-acss`

讲了这么多，感受都只是空谈理论。这边我多年的使用经验，总结的一个 ACSS 的 npm 类库 @_nu/css-acss 供你们使用。

对于 ACSS, bootstrap, material-ui, github ... 都有相关的类库，而后整个 ** 类库** 最完善的属于 tailwindcss。固然他们都是基于 style-system 理论建立的。上手成本相对较高，且每每须要设计师的介入。

和这些项目相比，我这边的方案，优势在于简单和极致的 CSS 开发体验。简单到整个逻辑只落点在命名规则，看完文档 5 分钟就会用，甚至彻底理解全部的逻辑。极致的 CSS 开发体验，体如今熟悉这套规则以后，你会开始怀疑，你的手指速度慢于你思考 CSS 的速度。

固然为了追求简单和开发体验这也是缺点，就是不够完善，没有处理相似 hover,focus... 等中间态，也没有添加任何自定义的响应点。这部分须要你们基于本身项目和 命名规则 自由扩展。