小而美的 css 的原子化

zhuJuan
144 阅读7分钟

这是摘自政采云的一篇博文，精辟，边记录边复习总结

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

.bg-blue { background-color: #357edd; } 
.f12 { font-size: 12px; }
.f14{ font-size: 14px; }
.m0 { margin: 0; }

image.png

上图代码是我现有项目里的，有很多类似的面向业务的写法， 这样写CSS 存在存在以下的问题：

  1. 一个简单的样式修改，都需要有新增一条样式规则。如果要做css抽离，这就意味只能按照业务组件复用，比如例子中是一个访问记录，只能整个引用。其中单个规则是基本上是无法被再次复用的。人们只能通过习惯是按照新业务在声明 CSS 类，复制已有相关已有功能，而不之一引用，因为这里类名和是业务绑定。
  2. 新的需求与原有规则冲突，需要修改一个其中一个样式，是通过新增一个嵌套类覆盖原有的样式，或者复制一个。
  3. 按照业务声明类名:比如字符过长省略的样式,多处重复。但是按照业务来命名 CSS 类又避免不了这个问题。比如下图：

image.png

  1. 类命名困难：缺失命名规范，不同人不同的风格，没有什么可读性，给类取名字一个十分痛苦的事情，大多数时候类名不伦不类，多人员开发项目时难以读懂。

image.png 6. 大量的重复的 CSS 文件。开发阶段 CSS 文件是按需加载的。这样就存在一个问题，如果一个页面也需要用另外页面的样式，开发同学第一反应是复制粘贴。很少发现同学用@import 的方式，导致大量重复的 CSS 文件。

image.png

7.大量嵌套且使用 & 符号，无法搜索定位样式，且可读性极差

image.png

我们大多数项目是后台管理的项目，自身也有一个成熟的组件库。这样的项目 CSS 的工作量是比较少的。所以项目开始之处，没有指定对应 CSS 规范和架构，上诉的问题日积月累，导致现有项目 CSS 代码状况较差，维护起来让人十分头大，急需整理项目 CSS 框架和规范整体项目的 CSS。我们这边调研几个比较流行的 CSS 框架，以下是几个框架简要介绍。

CSS 框架介绍

原子化 CSS

定义

“

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class。

原则

  • class 的命名按照功能
  • class 的功能单一

相关资料

css-tricks.com/lets-define…

OOCSS (Object-Oriented CSS  面向对象 CSS)

定义

OOCSS (Object-Oriented CSS  面向对象 CSS ) 是组织 CSS 的领先的模块化或基于组件的系统。它是 Nicole Sullivan 在 2008 年在 Web Directions North 大会上首次提出的，核心就是编写可复用和可维护的样式。

原则

  • 分离结构（structure）和皮肤（skin）。 您应该在基础对象中保留结构和位置，并在扩展类中保留视觉特征（如 background 或  border）。这样您就不必覆盖视觉属性。

  • 分离容器（container）和内容（content）。 永远不要在 CSS 中模仿 HTML 的结构。换句话说，不要在样式表中引用标签或 ID。相反，尝试创建和应用描述相关标签使用的类。并将嵌套类保持在最低限度。

相关资料

oocss.org/

SMACSS (Scalable and Modular Architecture for CSS)

定义

“

SMACSS（Scalable and Modular Architecture for CSS）编写模块化、结构化和可扩展的 CSS。

原则 SMACSS 认为 CSS 有 5 个类别，我们通过这 5 种类别来拼凑出完整的 class

  • Base 基础样式
  • Layout 布局样式
  • Module 模块样式
  • State 状态样式
  • Theme 主题样式

相关资料

smacss.com/

BEM（ block, element, modifier）

定义

首先 BEM 是一个分层系统，它把我们的网站分为三层，这三层正好对应着 BEM 三个英文单词的简写 block, element, modifier，分为为 块层、元素层、修饰符层

原则

  • 使用__两个下划线将块名称与元素名称分开
  • 使用--两个破折号分隔元素名称及其修饰符
  • 一切样式都是一个类，不能嵌套

相关资料

getbem.com/

ITCSS

定义

“

理智、可扩展、可管理CSS架构

原则 类似 SMACSS 对 CSS 元素进行了分层

“

  • Settings – 与预处理器一起使用，包含颜色、字体等定义
  • Tools – 工具与方法，比如 mixins，Settings 与 Tools 都不会产生任何 CSS 代码，仅仅是辅助函数与变量
  • Generic – 通用层，比如 reset html、body 的样式
  • Elements – 对通用元素的样式重置，比如 　a p div 等元素的样式重置 Objects – 类似 OOCSS 中的对象，描述一些常用的基础状态
  • Components – 对组件样式的定义，一个 UI 元素基本由 Objects 与 Components 组成
  • Utilities – 工具类，比如 .hidden

相关资料

getbem.com/

考虑到我们自身项目项目是一个后台管理类的项目，有成熟组件库。日常 CSS 开发工作量和复杂度不高。我们也希望有一个快速可以落地的框架方案，且实现的成本较低。我们对比几个框架后，选择 CSS 原子化作为我们的 CSS 的架构方案。CSS 原子化提供现成的解决方案，几乎就是拿就用（ tailwindcss  ，windicss ）。而且成体接入和改造成本也是最低的，不用自己再制定命名规则和使用规范。

CSS 原子化是如何解决这些问题的

image.png 这边如果需要 头像在右侧的，只需要将 float-left 替换成 float-right 即可。

  • 没有了命名的烦恼，按照功能命名
  • 没有相关嵌套，整体可读性加强
  • 没有重复 CSS 类， 一个功能对应一个类名，一个类名一个功能。没有重复
  • 没有新增 CSS 文件了。所有类名都是有工具库提供，项目中无需新增类了。

基本上解决了项目现有的 CSS 问题，而且 CSS 的维护性有了很大的提高，CSS 编码的成本相对于以前有明显的降低。

使用体验

使用 vscode 的编辑器，建议安装自动补全插件( marketplace.visualstudio.com/items?itemN… )，对于日常使用有很大的帮助，用起来的体验也很好。

image.png 刚开始的时候对应功能的类名不熟悉，需要使用官网( windicss.org/guide/ )查询。

image.png

CSS 规范是要基于视觉的设计规范的，winidicss 工具提供了 design token 的设计规范实现，再推广 CSS 的原子化之前和设计师统一好此类的规范，形成工具配置

image.png

而且相同样式复用需要整块的复制。虽然这提供属性化（windicss.org/features/at…

当然你有可以通过设计变量的方式来解决这个问题，但其实上和命名一个类名没有多大的区别。

image.png

在选定一个 CSS 框架作为项目的 CSS 规范的时候，需要考虑自身项目的现状，如果项目本身 CSS 复杂度较高，整体工作量较多，原子化的 CSS 是不太适合的。

总结

原子化的 CSS 可以帮助我们的项目解决 CSS 命名，代码重复，不断膨胀的问题，但它也不是一劳永逸的，实际使用中还是会有问题，关键在与开发者自身的取舍，权衡利弊。不要一个规则用到底，遇到问题也不变通。工具和思想发明其实也是为了解决你实际的问题。你会发现 windicss (cn.windicss.org/posts/v30-u…) 这类工具优先的css框架，也是添加蛮多额外的功能来弥补原子化 CSS 框架的缺陷，提升自身使用体验。

参考连接

摘录自政采云前端

avatar
文章
阅读
粉丝