关于css:组织和管理-CSS

在我的项目开发的过程中，基于无限的工夫内保质保量的实现开发工作无疑是一场挑战。在这场挑战中咱们岂但要疾速解决本人的问题，还须要与他人协同单干，以防止两者之间的抵触。

针对于大型项目的开发，CSS 如何组织和治理能力让咱们用更少的工夫写出更弱小的性能。这篇文章来表述一些我对 CSS 组织和治理的了解。当然，对于 ToC(面向集体) 利用，出于细节和动画的把控。再加上这种网页生命周期较短，往往复用性较差，然而针对于 ToB(面向企业) 利用，对立格调往往会博得客户的青眼。行列间距，主题款式等都应该联合对立，而不是每个页面不同设计。基于此，咱们须要组织与治理咱们的 css, 而不仅仅只是是靠 css in js 来为每个组件独自设计。

BEM 是一种相当出名的命名约定，BEM 的意思就是块（block）、元素（element）、修饰符（modifier）, 是由 Yandex 团队提出的一种前端命名方法论。这种奇妙的命名办法让你的 CSS 类对其余开发者来说更加通明而且更有意义。BEM 命名约定更加严格，而且蕴含更多的信息，它用于一个团队开发一个耗时的大我的项目。

如咱们在书写搭档卡片组件代码格调如下:

.partner-card {
}

.partner-card__name {
}

.partner-card__content {
}

.partner-card__content {
}

.partner-card__content--md {}

根据上述代码，咱们很容易看出以后开发的用意，同时也很难遇到代码反复的问题。当然，咱们能够利用 Less、Sass、Stylus 这些 css 处理器辅助开发，这里不再赘述。

计算迷信中最难的两件事之一就是命名，日常开发中如果没有一些约定，就很容易产生命名抵触，BEM 恰好解决了这一痛点, 咱们只须要外层款式名是一个有意义且独立惟一，就无需思考太多。

与 BEM 绝对应的还有 OOCSS SMACSS。而这两种不是间接可见的命名约定，而是提供了一系列的指标规定。这里不再具体论述，大家如果想要理解，能够去看一看值得参考的 css 实践：OOCSS、SMACSS 与 BEM。当然了，真正的组织与治理必然也离不开这些指标规定。

同时，应用 BEM 而不是 CSS 后辈选择器进行我的项目也会有肯定性能劣势(能够忽略不计)，这是因为浏览器解析 css 时是逆向解析，之前对 css 解析有肯定误区，因为书写是从返回后，所以认为解析也肯定是从返回后，然而大部分状况下，css 解析都是从后往前。

如果规定正向解析，例如「div div p em」，咱们首先就要查看以后元素到 html 的整条门路，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次能力确定匹配与否，效率很低。逆向匹配则不同，如果以后的 DOM 元素是 div，而不是 selector 最初的 em 元素，那只有一步就能排除。只有在匹配时，才会一直向上找父节点进行验证与过滤。无需回溯，效率较高。。

ACSS 示意的是原子化 CSS（Atomic CSS），是 Yahoo 提出来的一种独特的 CSS 代码组织形式，利用在 Yahoo 首页和其余产品中。ACSS 的独特性在于它的理念与个别开发人员的了解有很大的不同，并挑战了传统意义上编写 CSS 的最佳实际，也就是关注点拆散准则。ACSS 认为关注点拆散准则会导致冗余、繁琐和难以保护的 CSS 代码。

代码格调如下所示:

/** 背景色 色彩 内边距 */
<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>

<div>
   <div class="Bgc(#0280ae.5) H(90px) IbBox W(50%) foo_W(100%)"></div>
   <div class="Bgc(#0280ae) H(90px) IbBox W(50%) foo_W(100%)"></div>
</div>

<hr>

<div class="foo">
   <div class="Bgc(#0280ae.5) H(90px) IbBox W(50%) foo_W(100%)"></div>
   <div class="Bgc(#0280ae) H(90px) IbBox W(50%) foo_W(100%)"></div>
</div>

计算迷信中最难的两件事之一就是命名，而 Atomic CSS 间接舍弃了命名。一个类只做一件事。yahoo 利用这种计划加重了很多代码。

很多人会抗拒 Atomic CSS，起因在于须要记住一堆的类名，感觉会看起来比拟乱。然而事实上，你不须要思考它的构造等因素，而是它须要什么款式就间接提供好了。把脑力静止变成机械的膂力静止。

原子 CSS 的劣势确实有很多：

变动是能够预感的因为繁多职责准则（一个类 == 一种款式），很容易预测删除或增加一个类会做什么。
CSS 是精益的，简直没有冗余，也没有自重（所有款式都与我的项目相干）。
范畴无限, 不依赖于后辈 / 上下文选择器 - 款式是在“特异性层”外部实现的。
初学者敌对，原子 CSS 在设计好的状况下，甚至不须要编写样式表。对于 css 不够善于的开发人员更敌对（这个也不肯定是一件坏事，css 学习是必须的）
越大型的零碎，对以后设计越相熟，对库开发越纯熟的开发人员，编写代码的工夫和代码量就会越少。

如果一件事件只有利好而没有弊病那也是不可能的：

须要记住一堆没有意义的原子类，对于不同的团队，类名难以重用。
对于初学者有肯定影响，可能只会记得原子类
没有联合设计用意，原子类太细。

如果 ACSS 这个框架令人难以承受，那么不久前拿到 200w 投资的 tailwind 框架则是更优良的抉择。尽管该库也是原子化 CSS，然而它更具可读性。

<div class="md:flex bg-white rounded-lg p-6">
  <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
  <div class="text-center md:text-left">
    <h2 class="text-lg">Erin Lindford</h2>
    <div class="text-purple-500">Product Engineer</div>
    <div class="text-gray-600">erinlindford@example.com</div>
    <div class="text-gray-600">(555) 765-4321</div>
  </div>
</div>

如果你重度应用 Bootstrap，那么我认为间接上手 tailwind 没有什么问题。比照于 BootStrap，他做的更少，不会提供组件，仅仅提供款式。

自适应前置，咱们在应用其余 UI 库书写自适应前端网页时，往往会携带 -md -xs 诸如此类的类。而 Tailwind 则以 md:text-left lg:bg-teal-500 结尾布局响应式格调。在书写时候，让代码更加天然。
代码量可控，尽管 Tailwind CSS 的开发版本未压缩为 1680.1K，然而它能够轻易与 webpack 联合剔出没有应用的 css。
联合设计用意

  // tailwind 配置项
  module.exports = {
    theme: {
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
      },
      fontFamily: {display: ['Gilroy', 'sans-serif'],
        body: ['Graphik', 'sans-serif'],
      },
      borderWidth: {
        default: '1px',
        '0': '0',
        '2': '2px',
        '4': '4px',
      },
      extend: {
        colors: {cyan: '#9cdbff',},
        spacing: {
          '96': '24rem',
          '128': '32rem',
        }
      }
    }
  }

如果未来某一天集体须要从头编写本人的组件库，我肯定会应用它。置信该库会给我带来更好的开发体验。

Mvp.css 是一个简洁的 HTML 元素样式表库，尽管它不属于 css 组织与治理，但当开发 ToC 我的项目时候，咱们也能够把这种做法看作一种简洁的模式。

这个微型库联合 css 变量进行我的项目开发。不过兴许有人会认为他是一种前端反模式，因为他的款式挂在在元素之上。不过如果面对我的项目较小，且须要参差的格调体验，也可能是一个不错的计划。

:root {
  --border-radius: 5px;
  --box-shadow: 2px 2px 10px;
  --color: #118bee;
  --color-accent: #118bee0b;
  --color-bg: #fff;
  /* 其余变量 */
}

/* Layout */
article aside {background: var(--color-secondary-accent);
  border-left: 4px solid var(--color-secondary);
  padding: 0.01rem 0.8rem;
}

body {background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: var(--line-height);
  margin: 0;
  overflow-x: hidden;
  padding: 1rem 0;
}

对于 css 变量的一系列知识点，能够查看我之前的博客玩转 CSS 变量。该文章详解了 css 变量的利弊以及离奇玩法。

理论开发往往不止须要思考某一方面，只思考本人手上要做的货色，须要更高维度查看我的项目乃至整个开发体系。

团队单干永远是对立高于一切

针对于我的项目团队，任何一样事务能生存下来，都有其本人的劣势，当然万物有得就必有失。这是互相的，至于咱们前端人员，或者一个团队如何取舍，还是须要从自已或团队力量登程，有利用之，无利就不必了。我认为我最近看的一篇博客《程序员修炼之道》中的一段废稿能够表述正交性问题，事实上，无论式团队还是一段代码，正交性越差就越难以治理。

最初，在这里介绍一些本文没有介绍的工具。

Design token 辅助库 theo 来编写多端变量。
去除未应用的 Css 款式 uncss
通过 url 提取要害 CSS minimalcss , 晋升初始渲染速度
高性能的 CSS-in-JS 库 Emotion

值得参考的 css 实践：OOCSS、SMACSS 与 BEM

ACSS

tailwind

Mvp.css

玩转 CSS 变量

theo

uncss

minimalcss

Emotion

《程序员修炼之道》中的一段废稿

如果你感觉这篇文章不错，心愿能够给与我一些激励，在我的 github 博客下帮忙 star 一下。
博客地址

关于css:组织和管理-CSS

BEM 命名约定

Atomic CSS

tailwind

MVP.css

工程实际

参考资料

激励一下