组织和管理 CSS

时间  2020-12-09 标签 css html 前端 webpack git 程序员 github web 浏览器 sass

在项目开发的过程当中，基于有限的时间内保质保量的完成开发任务无疑是一场挑战。在这场挑战中咱们不但要快速处理本身的问题，还须要与别人协同合做，以免二者之间的冲突。css

针对于大型项目的开发，CSS 如何组织和管理才能让咱们用更少的时间写出更强大的功能。这篇文章来表述一些我对 CSS 组织和管理的理解。固然，对于 ToC(面向我的) 应用，出于细节和动画的把控。再加上这种网页生命周期较短，每每复用性较差，可是针对于 ToB(面向企业) 应用，统一风格每每会赢得客户的青睐。行列间距，主题样式等都应该结合统一，而不是每一个页面不一样设计。基于此，咱们须要组织与管理咱们的 css,而不只仅只是是靠 css in js 来为每一个组件单独设计。html

BEM 命名约定

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

如 咱们在书写伙伴卡片组件 代码风格以下:webpack

.partner-card {
}

.partner-card__name {
}

.partner-card__content {
}

.partner-card__content {
}

.partner-card__content--md {
}

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

计算科学中最难的两件事之一就是命名，平常开发中若是没有一些约定，就很容易发生命名冲突，BEM 偏偏解决了这一痛点,咱们只须要外层样式名是一个有意义且独立惟一，就无需考虑太多。程序员

与 BEM 相对应的还有 OOCSS SMACSS。而这两种不是直接可见的命名约定，而是提供了一系列的目标规则。这里再也不详细阐述，你们若是想要了解，能够去看一看 值得参考的css理论：OOCSS、SMACSS与BEM。固然了，真正的组织与管理必然也离不开这些目标规则。github

同时，使用 BEM 而不是 CSS 后代选择器进行项目也会有必定性能优点(能够忽略不计)，这是由于浏览器解析 css 时是逆向解析，以前对 css 解析有必定误区，因为书写是从前日后，因此认为解析也必定是从前日后，可是大部分状况下，css 解析都是从后往前。web

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

Atomic CSS

ACSS 表示的是原子化 CSS（Atomic CSS），是 Yahoo 提出来的一种独特的 CSS 代码组织方式，应用在 Yahoo 首页和其余产品中。ACSS 的独特性在于它的理念与通常开发人员的理解有很大的不一样，并挑战了传统意义上编写 CSS 的最佳实践，也就是关注点分离原则。ACSS 认为关注点分离原则会致使冗余、繁琐和难以维护的 CSS 代码。sass

代码风格以下所示:

/** 背景色 颜色 内边距 */
<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 学习是必需的）
  • 越大型的系统，对当前设计越熟悉，对库开发越熟练的开发人员，编写代码的时间和代码量就会越少。

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

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

tailwind

若是 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

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 一下。
博客地址

联系我们 沪ICP备13005482号-10