关于css:组织和管理-CSS

48次阅读

共计 4407 个字符,预计需要花费 12 分钟才能阅读完成。

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

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

BEM 命名约定

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 元素,那只有 一步 就能排除。只有在匹配时,才会一直向上找父节点进行验证与过滤。无需回溯,效率较高。。

Atomic CSS

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 学习是必须的)
  • 越大型的零碎,对以后设计越相熟,对库开发越纯熟的开发人员,编写代码的工夫和代码量就会越少。

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

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

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

正文完
 0