{"id":41347186,"url":"https://github.com/nuxodin/css-variables-name-conventions","last_synced_at":"2026-01-23T07:09:04.490Z","repository":{"id":52247047,"uuid":"267278223","full_name":"nuxodin/css-variables-name-conventions","owner":"nuxodin","description":"Custom properties: Naming conventions","archived":false,"fork":false,"pushed_at":"2024-05-02T15:43:37.000Z","size":50,"stargazers_count":30,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-30T18:32:06.660Z","etag":null,"topics":["conventions","css-variables","naming","naming-conventions"],"latest_commit_sha":null,"homepage":"","language":null,"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/nuxodin.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-27T09:34:29.000Z","updated_at":"2024-05-02T15:43:41.000Z","dependencies_parsed_at":"2022-08-30T23:51:41.389Z","dependency_job_id":"7177e416-4904-43f1-a1e4-134fa0322b7d","html_url":"https://github.com/nuxodin/css-variables-name-conventions","commit_stats":{"total_commits":57,"total_committers":1,"mean_commits":57.0,"dds":0.0,"last_synced_commit":"b016903d37ab450853d888cb3fa7d403f544ff14"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nuxodin/css-variables-name-conventions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fcss-variables-name-conventions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fcss-variables-name-conventions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fcss-variables-name-conventions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fcss-variables-name-conventions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxodin","download_url":"https://codeload.github.com/nuxodin/css-variables-name-conventions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fcss-variables-name-conventions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28682356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T05:48:07.525Z","status":"ssl_error","status_checked_at":"2026-01-23T05:48:07.129Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["conventions","css-variables","naming","naming-conventions"],"created_at":"2026-01-23T07:09:01.604Z","updated_at":"2026-01-23T07:09:04.483Z","avatar_url":"https://github.com/nuxodin.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS variables - naming conventions\n\nThis project aims to identify commonalities of css-variable names in different frameworks and to derive recommendations.  \n\nIt would be great if third-party components could rely on the availability of the same variables!  \n\n\n## Colors\nBest practice in my eyes:  \n```css\n  --hsl-h: 38.8;\n  --hsl-s: 80%;\n  --hsl-l: 38.4%;\n\n  --color: hsl(var(--hsl-h), var(--hsl-s), var(--hsl-l));\n\n  --color-light: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .9 ) );\n  --color-dark: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) * .7 ) );\n\n  --color-bg: hsl(var(--hsl-h), var(--hsl-s), 99.5%);\n  --color-text: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) * .4 ) );\n\n  --hsl2-h: 20;   \n  --hsl2-s: var(--hsl-s);\n  --hsl2-l: var(--hsl-l);\n  --color2: hsl(var(--hsl2-h), var(--hsl2-s), var(--hsl2-l));\n  ...   \n  \n```\nOnce css `lch()` is supported, `--lch-l` will be used  \n\n\n**advantages:** at best, you just have to change the \"hue\"  \n**disadvantage:** more code than if you define the colors directly  \n\nalso to be considered:  \n`--color1`;  instead of `--color` ?  \n`--theme-color` would be like the Web App Manifest standard...  \n`--theme-primary` often used, what can go wrong when just use `--color` ? (collisions?)   \n\n\n\n## Fonts\n--font  \n--font2  \n\n## Layout\n\nspacing between sections  \neg. `--space:3rem;` --space2...?  \n\ncolumn- / table- / grid-gaps  \neg. `--gap:2rem;` `--col-gap:2rem;` `--row-gap:2rem;`  \n\n(max) content-width  \neg. `--width:50rem`  \n\n\n## Increment / Decrement\nMany properties are often requested in different gradations.  \nExamples:  \n`--width-x`, `--space-x`, `--gray-x`   \nPossibilities are:  \n`--width-0` to `--width-10` (`--width` would then correspond to `--width-5`)  \n`--width-0` to `--width-100` (`--width` would then correspond to `--width-50`)  \n`--width-xxs` to `--width-xxl` (`--width` would then correspond to `--width-m`)  \n\nOther recommendations?\n\n\n## JS-generated / Read-only\n\nCSS variables that are controlled by js and should not be changed are labelled with the prefix `--js-`.  \nExample: `--js-optimal-font-size`  \nThis practice helps to distinguish variables that are manipulated by JavaScript and should only be read from others.  \n\nAlternatives would be:  \n- --ro-var (readonly)\n- --r-var (read)\n- --gen (generated)\n\n\n## Cascade Layers\nIf I don't misunderstand, cascade levels can get messed up when using foreign code.\nDo we need defacto standards here? \n\n```css\n@layer base;\n@layer theme;\n@layer components;\n@layer utilities;\n```\n\n## Frameworks\n\nOpen-Props  \nhttps://open-props.style/\n\nPico.css  \nhttps://github.com/picocss/pico/blob/master/css/pico.classless.css\n\nMVP.css  \nhttps://andybrewer.github.io/mvp/#variables\n\nfeathercss:  \nhttps://github.com/elishaterada/feathercss/blob/master/dist/feather.css\n\nbasic.css  \nhttps://github.com/vladocar/Basic.css/blob/master/css/basic.css\n\npollen:  \nhttps://github.com/radioactivepesto/pollen/tree/master/src/lib\n\nionic framework:  \nhttps://ionicframework.com/docs/theming/colors\n\nsuitcss:  \nhttps://github.com/suitcss/suit/blob/master/packages/theme/lib/theme.css\n\nchota:  \nhttps://jenil.github.io/chota/\n\nbulma:  \nhttps://bulma.io/documentation/customize/variables/\n\nbootstrap:  \nhttps://github.com/twbs/bootstrap/blob/master/scss/_variables.scss\n\nmaterial-design:  \nhttps://github.com/material-components/material-components-web/blob/91aa2d6a613565546a3c47c375ad929f79c910b4/docs/theming.md#step-4-changing-the-theme-with-css-custom-properties\n\nmicrosoft fast:  \nhttps://fast.design/docs/design/design-system\n\nant.design:  \nhttps://ant.design/docs/react/customize-theme\n\nzoo-web-components:  \nhttps://github.com/zooplus/zoo-web-components\n\n## Blog-posts\n\nhttps://uxdesign.cc/naming-design-tokens-9454818ed7cb\n\nhttps://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676\n\nhttps://www.youtube.com/watch?v=P7kR5dag8iw\n\nhttps://css-tricks.com/what-do-you-name-color-variables/\n  \n  \n  \n**take part**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxodin%2Fcss-variables-name-conventions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxodin%2Fcss-variables-name-conventions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxodin%2Fcss-variables-name-conventions/lists"}