{"id":17070480,"url":"https://github.com/oakmac/snowflake-css","last_synced_at":"2025-04-12T19:41:23.981Z","repository":{"id":29675444,"uuid":"33217770","full_name":"oakmac/snowflake-css","owner":"oakmac","description":"Snowflake CSS - simplify your CSS with globally unique selectors","archived":false,"fork":false,"pushed_at":"2021-06-16T22:04:53.000Z","size":1304,"stargazers_count":13,"open_issues_count":13,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T21:02:41.333Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oakmac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-01T00:31:54.000Z","updated_at":"2022-03-11T23:15:29.000Z","dependencies_parsed_at":"2022-09-13T21:01:09.563Z","dependency_job_id":null,"html_url":"https://github.com/oakmac/snowflake-css","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/oakmac%2Fsnowflake-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fsnowflake-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fsnowflake-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fsnowflake-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oakmac","download_url":"https://codeload.github.com/oakmac/snowflake-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248624948,"owners_count":21135509,"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":[],"created_at":"2024-10-14T11:31:42.032Z","updated_at":"2025-04-12T19:41:23.950Z","avatar_url":"https://github.com/oakmac.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snowflake CSS\n\n**tldr:** Simplify CSS with globally unique selectors.\n\n## What is this all about?\n\nSnowflake CSS is a code strategy and set of tools designed for dealing with the\ncomplexity of CSS in large web applications and websites. It is designed to make\nCSS simple to reason about and easy to maintain over time.\n\nBy using a flat structure of globally unique single-class selectors (flakes),\nSnowflake CSS avoids complexity often found in large CSS codebases and enables\nmaintenance and optimization tasks to be done with tools instead of developer\nbrainpower.\n\n## How do I use Snowflake CSS?\n\nThe rules for Snowflake are simple:\n\n1. Use only single-class selectors.\n1. Use globally-unique symbols for your class names.\n1. Do not change your selectors over time (ie: append-only CSS)\n\n## How do you create a globally unique class name?\n\nSnowflake CSS uses the following convention for class names:\n\n1. only lower-case letters with hyphens (ie: `snake-case`)\n1. append a 5-digit random hexadecimal string (a **hextail**) to the end of the class name:\n  - the hextail must be only hexadecimal characters (ie: `[a-f0-9]`)\n  - the hextail must have at least **one alpha character**\n  - the hextail must have at least **one number character**\n\nExamples:\n- `.primary-btn-d4b50`\n- `.header-411db`\n- `.login-btn-9c2da`\n- `.cancel-6b36a`\n- `.jumbo-image-4b455`\n\nAnti-examples:\n- `.LoginBtn-783af` --\u003e only lower-case letters in the class name\n- `.logo-22536` --\u003e hextail must contain at least one alpha character\n- `.cancel-button-bceff` --\u003e hextail must contain at least one number\n- `.nav-link-e72c` --\u003e hextail must be 5 characters\n\n## FAQ\n\n#### What is the deal with those hashes?\n\nThe hextail is not a [cryptographic hash]. The characters that make up the\nhextail are random and only serve the purpose of creating a project-wide unique\nsymbol that can be found via tooling.\n\nYou can think of the hextail as \"noise for the human, signal for the computer\".\n\n[cryptographic hash]:https://en.wikipedia.org/wiki/Cryptographic_hash_function\n\n#### Why is the hextail 5 characters long?\n\nUsing 5 hexademical characters creates an address space of around 1 million\noptions (~16^5). Combined with the rest of the words in the class name should be\nplenty enough randomness for even the largest of web projects.\n\nThe requirement of \"at least one number and one letter\" came from testing in\npractical application. This helps to reduce false positive matches against\nUUIDs, long numbers, and other symbols often found in codebases.\n\n#### Won't this create a lot of extra CSS?\n\nIt is a common misconception that projects using Snowflake CSS result in large\nCSS output. In practice, the opposite is often true: when projects are written\nusing only the CSS classes that define their output, the end result tends to be\nvery small.\n\n#### How am I supposed to remember the hextails?\n\nPlease do not remember hextails! The purpose of Snowflake CSS is to offload\nglobal symbol indexing to computer tooling, not human brains.\n\n## Editor Plugins and Tooling\n\n\u003e NOTE: As of Dec 2020, more editor plugins are needed. Please reach out if you have\n  interest in working on one and need help.\n\n- [snowflake-buddy for Atom](https://atom.io/packages/snowflake-buddy)\n\n## Getting Started\n\n```sh\n# add snowflake-css to your node.js project dependencies\nnpm install snowflake-css --save-dev\n\n# initialize a snowflake-css.json file with your information\nnpx snowflake init\n\n# remove orphan snowflake classes from your production CSS output\nnpx snowflake prune\n```\n\n## Development\n\nSnowflake CSS is written in [ClojureScript] using [shadow-cljs].\n\n```sh\n# install node_modules\nyarn install\n\n# compile bin/snowflake-css.js\nnpx shadow-cljs release snowflake-css\n```\n\n[ClojureScript]:https://clojurescript.org/\n[shadow-cljs]:https://shadow-cljs.org/\n\n## License\n\n[ISC License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foakmac%2Fsnowflake-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foakmac%2Fsnowflake-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foakmac%2Fsnowflake-css/lists"}