Skip to content

Latest commit

 

History

History
135 lines (94 loc) · 5.42 KB

zh.md

File metadata and controls

135 lines (94 loc) · 5.42 KB

SACSS

SACSS: Static Atomic CSS

SACSS 目标在于帮助你更快更简单的创建属于自己项目的 Utility First CSS 类库。

npm package jsdelivr github

English | 简体中文

Why Utility First CSS?

命名 是 CSS 中最难的问题没有之一

基于内容的语义化命名能够让你创建艺术品。

然而在一个多人协作的项目，自认为语义化的命名往往会成为被人的噩梦。

BEM 虽能规范团队中大家的命名方式，然而每个人还是需要基于自己的理解去命名。

在流行的 CSS 解决方案中，Utility First CSS 能够比较有效地解决这个问题。

因为它已经预制好需要构建的 UI 的一系列 CSS 类名，既然没有命名那么自然也就解决了命名这个核心痛点。

Utility First CSS

<style>
/* 以下 CSS 代码初始阶段已经创建，开发阶段只需要使用 */
.fs16{ font-size: 16px; }
.lh24{ line-height: 24px; }
.fw400{ font-weight: 400; }
.fw900{ font-weight: 900; }
</style>

<h1 class="fs16 lh24 fw900">Hello world</h1>
<p class="fs16 lh24 fw400">Utility First CSS</p>

Semantic CSS

<style>
.h1{
  font-size:16px;
  line-height:24px;
  font-weight:900;
}
.paragraph{
  font-size:16px;
  line-height:24px;
  font-weight:400;
}
</style>
<h1 class="h1">Hello world</h1>
<p class="paragraph">Semantic CSS</p>

理想状态下（实现方案相同），我们不需要创建任何 CSS Class。只需要通过组合（拼凑多个 Class ）的形式既可以完成 UI。

当然 Utility First CSS 在解决命名这一核心痛点的同时。

还能够明显的提升 CSS 编写效率，以及最大限度的控制 CSS 代码膨胀率。

功能越单一的 Class 复用率越高

Why Not Tailwind CSS?

Tailwind CSS 非常优秀，但不一定适合。

基于 Utility First CSS 的 CSS 方案有很多，最有名的是 Tailwind CSS 它也是目前所有 CSS 解决方案中 github 数最高的类库。

Tailwind CSS 类库提供了丰富且全面的 CSS 类名，方便我们专注在 HTML 中就可以快速的实现 UI。

可正因为大而全，以至于上手和记忆成本都相对较高，总有一种杀鸡用牛刀的感觉。

而 SACSS 则是侧重在告诉你创建 Utility First CSS 的方法（命名规则）。

比如想要实现文本水平居中对齐 text-align:center; 这个效果。

在使用 Tailwind CSS 时我们需要在整个上百的 Class Name 类库中，搜寻与 水平居中对齐 对应的 Class Name 是什么（.text-center）。

而在使用 SACSS 时，你的思考路径是：你先知道 水平居中对齐 的代码是 text-align:center; 然后基于只取首字母的命名规则公式，你就能得到了 .tac。

也就是说你看到 Style 属性，你就知道与之对应的 Class Name 是什么，完全不用记忆，并且这个模式会大大的增加开发体验。

<!-- Tailwind CSS -->
<style>
.text-center{ text-align: center; }
</style>
<h1 class="text-center">hello world</h1>

<!-- SACSS -->
<style>
.tac{ text-align: center; }
</style>
<h1 class="tac">hello world</h1>

我们还为这套命名规则创建了 Figma 插件，使用这个插件你甚至你只需要从设计工具中拷贝和粘贴项目代码。

授人以鱼不如授人以渔

命名对比

Declarations SACSS ACSS Tailwind CSS Basscss Tachyons
margin: 12px; .m12 .M(12px) .m-4 .m2 .ma3
text-align: center .tac .Ta(c) .text-center .center .tc
margin: -12px .m-12 .M(-12px) .-m-4 .mxn2 .na3
font-size: 25px .fs25 .Fz(25px) .text-2xl .h2 .f3
width: 50% .w50% .W(50%) .w-1/2 .col-6 .w-50
line-height: 1.5 .lh1.5 .Lh(1.5) .leading-normal .line-height-4 .lh-copy
- - 了解更多 了解更多 了解更多 了解更多

可以很明显的看到，同其它类型项目相比，SACSS 的命名更加的规范和简单。

灵感

  • Tailwind CSS：最流行的 Utility First CSS 类库；
  • Atomic CSS: 核心理念（雅虎）；
  • Fower： An utility-first CSS in JS library for rapid UI development (文档灵感);
  • Emmet: 命名规则灵感来自 Emmet，很多 IDE 内置这个规则;