SACSS: Static Atomic CSS

SACSS is designed to help you create your own Utility First CSS library faster and easier.

The website address

We’re all here. Why don’t we Star?

Why Utility First CSS?

Naming is one of the most difficult problems in CSS

Content-based semantic naming allows you to create artwork.

However, in a collaborative project with many people, naming things that are supposed to be semantic can be a nightmare.

BEM can standardize the naming of people on the team, but each person needs to use his or her own interpretation of the naming.

Among the popular CSS solutions, Utility First CSS solves this problem more effectively.

Because it already predefines a set of CSS class names for the UI to be built, the core naming pain point is solved by not naming it.

Utility First CSS

<style>
/* The following CSS code has already been created in the initial stage; only */ is needed in the development stage
.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>
Copy the code

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>
Copy the code

Ideally (with the same implementation), we don’t need to create any CSS classes. You only need to compose (piece together multiple classes) to complete the UI.

Of course Utility First CSS solves the core pain point of naming at the same time. It also significantly improves CSS writing efficiency and maximizes CSS code inflation.

The more monolithic the Class, the higher the reuse rate

Why Not Tailwind CSS?

Tailwind CSS is excellent, but not necessarily suitable.

Based on theUtility First CSSThere are many CSS schemes, the most famous of which isTailwind CSSIt is also one of the most popular CSS solutionsThe highest number of class libraries.

The Tailwind CSS library provides a rich and comprehensive list of CSS class names for quick UI implementation while focusing on HTML.

But because it is large and complete, so that the start and memory costs are relatively high, there is always a feeling of killing a chicken with a knife.

SACSS focuses on telling you how to create Utility First CSS (naming rules).

For example, if you want to align your text horizontally, text-align:center; This effect.

When using Tailwind CSS we need to search the entire Class Name library (.text-center) for the Class Name that corresponds to horizontal center alignment.

With SACSS, your thinking path is: you know the code for horizontal alignment is text-align:center; Then you get.tac based on the first letter naming formula.

This means that when you see the Style attribute, you know what the corresponding Class Name is, and you don’t have to remember it at all, and this mode greatly increases the development experience.

<! -- 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>
Copy the code

We also created the Figma plugin for this naming convention, with which you can even just copy and paste project code from the design tool.

It is better to teach a man to fish than to give him fish

After contrast

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
The line - height: 1.5 . Lh1.5 Lh (1.5) .leading-normal .line-height-4 .lh-copy
– – To learn more To learn more To learn more To learn more

It is obvious that the naming of SACSS is simpler than other types of projects.

inspiration

  • Tailwind CSS: The most popular Utility First CSS library;
  • Atomic CSS: Core concepts (Yahoo);
  • Fower: An Utility-first CSS in JS Library for Rapid UI Development;
  • Emmet: The naming convention is inspired by Emmet and is built into many ides;