{"id":13392852,"url":"https://github.com/kripod/css-homogenizer","last_synced_at":"2025-07-20T15:02:32.596Z","repository":{"id":57210914,"uuid":"288424240","full_name":"kripod/css-homogenizer","owner":"kripod","description":"Base CSS endorsing semantic HTML and design token usage","archived":false,"fork":false,"pushed_at":"2024-10-25T20:37:21.000Z","size":181,"stargazers_count":36,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-22T17:05:55.525Z","etag":null,"topics":["css","css-reset","normalize-css"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/kripod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"kripod"}},"created_at":"2020-08-18T10:25:37.000Z","updated_at":"2025-01-04T20:15:42.000Z","dependencies_parsed_at":"2024-05-30T05:10:04.507Z","dependency_job_id":null,"html_url":"https://github.com/kripod/css-homogenizer","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/kripod/css-homogenizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-homogenizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-homogenizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-homogenizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-homogenizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kripod","download_url":"https://codeload.github.com/kripod/css-homogenizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-homogenizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266143942,"owners_count":23883069,"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":["css","css-reset","normalize-css"],"created_at":"2024-07-30T17:00:38.144Z","updated_at":"2025-07-20T15:02:32.565Z","avatar_url":"https://github.com/kripod.png","language":"CSS","funding_links":["https://github.com/sponsors/kripod"],"categories":["CSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/kripod/css-homogenizer/main/assets/logo.svg\" alt=\"css-homogenizer logo\" width=\"524\" height=\"96\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\tBase CSS endorsing semantic HTML and design token usage\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/css-homogenizer\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/css-homogenizer\" alt=\"npm version\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Backstory\n\nBrowsing through the issues of [CSS Remedy](https://github.com/jensimmons/cssremedy), I came across an important observation by Jen Simmons:\n\n\u003e Why don’t people use `\u003cfieldset\u003e` far more — instead of divs in their forms?\n\u003e\n\u003e Perhaps it’s because fieldset comes with ugly default styling.\n\nThis made me question common [HTML rendering suggestions](https://html.spec.whatwg.org/multipage/rendering.html). Each design is different, so **there isn’t a single set of sensible defaults** for every website.\n\nStyle normalization is crucial for a consistent user experience among browsers. With the emergence of various design systems, however, **CSS normalizers and resets should coexist and complement each other.**\n\nCatering to the needs of token-based theming systems, this project was born.\n\n## Usage\n\n1.  Install the library and a normalizer with your package manager (or use [a CDN](https://www.jsdelivr.com/package/npm/css-homogenizer)):\n\n    ```sh\n    npm install css-homogenizer modern-normalize\n    ```\n\n    _Using either [modern-normalize](https://github.com/sindresorhus/modern-normalize) or [@csstools/normalize.css](https://github.com/csstools/normalize.css) is optional but recommended to fix common browser inconsistencies._\n\n2.  Include the following styles **in the order below, before any custom CSS:**\n\n    ```js\n    import \"modern-normalize/modern-normalize.css\";\n    import \"css-homogenizer/reset.css\"; // or \"css-homogenizer/reset-scoped.css\"\n    import \"css-homogenizer/base.css\";\n    ```\n\n    You may adopt each stylesheet one by one.\n\n    Please refer to your framework’s guidelines for importing CSS files at the top level. Plain `\u003clink\u003e` tags may also be used, but be aware of the [performance costs](https://csswizardry.com/2018/11/css-and-network-performance/).\n\n## What’s included?\n\n### [`reset.css`](./reset.css)\n\nNullifies spacings, borders and several typography-related settings.\n\n- Line heights are matched up with font sizes.\n- Heading (`h1`–`h6`), `th` and `address` elements inherit their font properties and text alignment from parents.\n- List (`ul`, `ol`, `menu`) and `a` elements are unstyled to promote proper HTML semantics over misleading visuals.\n- Form controls are unstyled to cater for overrides.\n- Placeholders have `opacity: 1` set for consistency between browsers.\n- Tables inherit their `border-color` for consistency between browsers.\n\nObsolete and deprecated HTML elements are ignored, as their usage is strongly discouraged.\n\n### [`reset-scoped.css`](./reset-scoped.css)\n\nA scoped variant of the reset, targeting classes instead of element types.\n\n- Classes are prefixed by `_` to avoid collisions with other selectors. E.g. `._p` contains declarations applicable to `p` elements.\n- Rules for `html` and `body` elements are omitted.\n\n#### Usage with React\n\nWhen using a compiler like Babel, the [underlying JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) may be overridden. This allows for auto-injecting scoped reset classes to plain HTML elements on the fly:\n\n- `\u003cp\u003eHi\u003c/p\u003e` → `\u003cp class=\"_p\"\u003eHi\u003c/p\u003e`\n- `\u003cp className=\"custom\"\u003eHi\u003c/p\u003e` → `\u003cp class=\"_p custom\"\u003eHi\u003c/p\u003e`\n\n```jsonc\n// babel.config.json\n{\n  \"presets\": [\n    [\n      \"@babel/preset-react\",\n      {\n        \"runtime\": \"automatic\",\n        \"importSource\": \"css-homogenizer/reset-scoped/react\",\n      },\n    ],\n  ],\n}\n```\n\n#### Usage manually\n\nYou may attach a scoped reset class to an element on your own, e.g.:\n\n```html\n\u003cp class=\"_p\"\u003eHi\u003c/p\u003e\n```\n\nTo see all the classes available, execute the following snippet:\n\n```js\nimport { getResetClassName, resetElements } from \"css-homogenizer/reset-scoped\";\n\nconsole.log(resetElements.map((element) =\u003e getResetClassName(element)));\n```\n\nHelper methods also come in handy when dealing with third-party libraries, e.g.:\n\n```jsx\nimport { Listbox } from \"@headlessui/react\";\nimport { getResetClassName } from \"css-homogenizer/reset-scoped\";\n\nfunction Select(/* … */) {\n  return (\n    \u003cListbox /* … */\u003e\n      \u003cListbox.Button className={getResetClassName(\"button\")}\u003e\n        {/* … */}\n      \u003c/Listbox.Button\u003e\n      {/* … */}\n    \u003c/Listbox\u003e\n  );\n}\n```\n\n### [`base.css`](./base.css)\n\nProvides a minimalistic set of generally useful rules. Please refer to the file’s inline comments for further details.\n\n## Browser support\n\n- Latest Chrome\n- Latest Firefox\n- Latest Safari\n\n## Acknowledgments\n\nThis project was mainly inspired by [Reset CSS](https://meyerweb.com/eric/tools/css/reset/), [CSS Remedy](https://github.com/jensimmons/cssremedy) and [sanitize.css](https://github.com/csstools/sanitize.css). It wouldn’t have been possible without the long-standing efforts of the authors behind those predecessors.\n\nThe logo’s test tube emoji is courtesy of [Twemoji](https://twemoji.twitter.com/) and the font in use is [Lobster](https://fonts.google.com/specimen/Lobster).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fcss-homogenizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkripod%2Fcss-homogenizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fcss-homogenizer/lists"}