{"id":15289043,"url":"https://github.com/s-acss/sacss","last_synced_at":"2025-04-13T08:11:50.755Z","repository":{"id":65492275,"uuid":"367852583","full_name":"s-acss/sacss","owner":"s-acss","description":"Create Utility First CSS library for your project faster and easier.","archived":false,"fork":false,"pushed_at":"2021-08-24T05:58:35.000Z","size":1119,"stargazers_count":15,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T08:11:39.026Z","etag":null,"topics":["acss","atomic-css","figma-plugin","sacss","tailwind-css","utility-css"],"latest_commit_sha":null,"homepage":"https://s-acss.github.io/","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s-acss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-16T10:47:41.000Z","updated_at":"2024-03-17T02:51:14.000Z","dependencies_parsed_at":"2023-01-25T19:35:15.345Z","dependency_job_id":null,"html_url":"https://github.com/s-acss/sacss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Fsacss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Fsacss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Fsacss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Fsacss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s-acss","download_url":"https://codeload.github.com/s-acss/sacss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681497,"owners_count":21144700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acss","atomic-css","figma-plugin","sacss","tailwind-css","utility-css"],"created_at":"2024-09-30T15:58:37.598Z","updated_at":"2025-04-13T08:11:50.726Z","avatar_url":"https://github.com/s-acss.png","language":"Less","readme":"# SACSS\n\n\u003e SACSS: Static Atomic CSS\n\nSACSS is attempt to help you create **Utility First CSS** class library for your project more **fast** and **easy**.\n\n[![npm package][npm-badge]][npm-url]\n[![jsdelivr][jsdelivr-badge]][jsdelivr-url]\n[![github][git-badge]][git-url]\n\n[npm-badge]: https://img.shields.io/npm/v/sacss.svg\n[npm-url]: https://www.npmjs.org/package/sacss\n[npm-downloads]: https://img.shields.io/npm/dw/sacss\n[git-url]: https://github.com/s-acss/sacss\n[git-badge]: https://img.shields.io/github/stars/s-acss/sacss.svg?style=social\n[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/sacss/badge\n[jsdelivr-url]: https://www.jsdelivr.com/package/npm/sacss\n\nEnglish | [简体中文](./lang/zh.md)\n\n## Why Utility First CSS?\n\n\u003e **Naming** is one of the most difficult problems in CSS\n\nContent-based **semantic** naming enables you to create artwork.\n\nHowever, in a multi-person collaborative project, naming that you think is **semantic** can often be a nightmare to be around.\n\nWhile **BEM** can standardize the way everyone on the team names things, however everyone still needs to name things based on their own understanding.\n\nAmong the popular CSS solutions, **Utility First CSS** solves this problem relatively effectively.\n\nBecause it already has a series of CSS class names for the UI that needs to be built, the core pain point of naming is naturally solved since there is no naming.\n\n### Utility First CSS\n\n```html\n\u003cstyle\u003e\n/* The following CSS code has already been created in the initial phase, and only needs to be used in the development phase */\n.fs16{ font-size: 16px; }\n.lh24{ line-height: 24px; }\n.fw400{ font-weight: 400; }\n.fw900{ font-weight: 900; }\n\u003c/style\u003e\n\n\u003ch1 class=\"fs16 lh24 fw900\"\u003eHello world\u003c/h1\u003e\n\u003cp class=\"fs16 lh24 fw400\"\u003eUtility First CSS\u003c/p\u003e\n```\n\n### Semantic CSS\n\n```html\n\u003cstyle\u003e\n.h1{\n  font-size:16px;\n  line-height:24px;\n  font-weight:900;\n}\n.paragraph{\n  font-size:16px;\n  line-height:24px;\n  font-weight:400;\n}\n\u003c/style\u003e\n\u003ch1 class=\"h1\"\u003eHello world\u003c/h1\u003e\n\u003cp class=\"paragraph\"\u003eSemantic CSS\u003c/p\u003e\n```\n\nIdeally, we don't need to **create** any CSS Classes, we just need to **combine** (piece together multiple Classes) to complete the UI.\n\nOf course, **Utility First CSS** solves the core pain point of naming.\n\nIt also significantly improves CSS writing **efficiency** and minimizes CSS code **bulk**.\n\n\u003e The more functional a Class is, the higher the reuse rate\n\n## Why Not Tailwind CSS?\n\n\u003e Tailwind CSS is very good, but not always suitable.\n\nThere are many CSS solutions based on **Utility First CSS**, the most famous one is [Tailwind CSS](https://tailwindcss.com/) which is also the ! [github](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?style=social) has the highest number of libraries.\n\nTailwind CSS class library provides **rich** and **comprehensive** CSS class names, so that we can quickly implement UI by focusing on HTML.\n\nHowever, because it is **big and comprehensive**, it is relatively expensive to **get started** and **remember**, and there is always a feeling of **killing a chicken with a bull**.\n\nSACSS is focused on showing you how to create **Utility First CSS** ([naming convention](. /guides.name)).\n\nFor example, if you want to achieve the text **horizontally centered** `text-align:center;` effect.\n\nWhen using Tailwind CSS, we need to search through the entire library of hundreds of Class Name classes to find the Class Name (`.text-center`) that corresponds to **horizontally centered**.\n\nWhen using SACSS, your path is this: you first know that the code for **horizontally centered** is `.text-align:center;` and then you get `.tac` based on the formula for naming rules that only take **initial letters**.\n\nThat means you see the Style property and you know what the corresponding Class Name is, no need to remember it at all, and this pattern will greatly increase the **development experience**.\n\n```html\n\u003c!-- Tailwind CSS --\u003e\n\u003cstyle\u003e\n.text-center{ text-align: center; }\n\u003c/style\u003e\n\u003ch1 class=\"text-center\"\u003ehello world\u003c/h1\u003e\n\n\u003c!-- SACSS --\u003e\n\u003cstyle\u003e\n.tac{ text-align: center; }\n\u003c/style\u003e\n\u003ch1 class=\"tac\"\u003ehello world\u003c/h1\u003e\n```\n\nWe also created the [Figma plugin] for this set of naming rules (. /intro.design), with this plugin you even you only need to **copy** and **paste** the project code from the design tool.\n\n\u003e It is better to give a man a fish than to teach him how to fish.\n\n## Different\n\n| Declarations         | SACSS     | ACSS       | Tailwind CSS      | Basscss          | Tachyons   |\n| -------------------- | -------- | ----------- | ----------------- | ---------------- | ---------- |\n| `margin: 12px;`      | `.m12`   | `.M(12px)`  | `.m-4`            | `.m2`            | `.ma3`     |\n| `text-align: center` | `.tac`   | `.Ta(c)`    | `.text-center`    | `.center`        | `.tc`      |\n| `margin: -12px`      | `.m-12`  | `.M(-12px)` | `.-m-4`           | `.mxn2`          | `.na3`     |\n| `font-size: 25px`    | `.fs25`  | `.Fz(25px)` | `.text-2xl`       | `.h2`            | `.f3`      |\n| `width: 50%`         | `.w50%`  | `.W(50%)`   | `.w-1/2`          | `.col-6`         | `.w-50`    |\n| `line-height: 1.5`   | `.lh1.5` | `.Lh(1.5)`  | `.leading-normal` | `.line-height-4` | `.lh-copy` |\n| - | - | [More](https://acss.io/) | [More](https://tailwindcss.com/) |[More](https://basscss.com/) |[More](http://tachyons.io/) |\n\nIt is clear that the naming of SACSS is more **standard** and **simple** than other types of projects.\n\n## Inspiration\n\n- [Tailwind CSS](https://tailwindcss.com/): the most popular **Utility First CSS** class library.\n- [Atomic CSS](https://acss.io/): The core idea (Yahoo!).\n- [Fower](https://fower.vercel.app/): An utility-first CSS in JS library for rapid UI development (Documentation Inspiration);\n- [Emmet](https://www.emmet.io/): Naming rules inspired by Emmet, many IDEs have this rule built in;\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-acss%2Fsacss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-acss%2Fsacss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-acss%2Fsacss/lists"}