{"id":15594538,"url":"https://github.com/jofaval/css-specificity-calculator","last_synced_at":"2025-03-29T10:45:30.400Z","repository":{"id":125617981,"uuid":"513212196","full_name":"jofaval/css-specificity-calculator","owner":"jofaval","description":"Simplify your CSS debugging with this specificity calculator","archived":false,"fork":false,"pushed_at":"2022-11-16T20:35:27.000Z","size":129,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T09:34:03.487Z","etag":null,"topics":["css","debugging","javascript","python","specificity","utility"],"latest_commit_sha":null,"homepage":"https://jofaval.github.io/css-specificity-calculator/","language":"JavaScript","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/jofaval.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-07-12T16:18:27.000Z","updated_at":"2023-03-07T08:06:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"e86f9d3a-4e37-4c6d-bf43-e43bf155d328","html_url":"https://github.com/jofaval/css-specificity-calculator","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/jofaval%2Fcss-specificity-calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fcss-specificity-calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fcss-specificity-calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Fcss-specificity-calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jofaval","download_url":"https://codeload.github.com/jofaval/css-specificity-calculator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246174498,"owners_count":20735412,"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","debugging","javascript","python","specificity","utility"],"created_at":"2024-10-03T00:40:56.855Z","updated_at":"2025-03-29T10:45:30.368Z","avatar_url":"https://github.com/jofaval.png","language":"JavaScript","readme":"# Specificity Calculator\n\nSimplify your CSS debugging\n\n## Contents\n\n1. [Description](#description)\n1. [Motivation](#motivation)\n1. [What is specificity?](#what-is-specificity)\n   1. [Points system](#points-system)\n1. [Usage](#usage)\n   1. [Javascript](#javascript)\n   1. [Python](#python)\n1. [License](#license)\n\n## Description\n\n[Back to the top](#contents)\n\nIt's main idea is to provide an easy-to-use calculator for specificity. Why? Because it happened be something \"problematic\" while debugging a CSS rule between thousands of lines.\n\n## Motivation\n\n[Back to the top](#contents)\n\nIt happend at work, while helping a junior debug a (theme) style some obscure element in a legacy codebase. It so happened that specificity was one way to approach the problem.\n\nOriginal concept at: [https://jofaval.github.io/learn-it/examples/selectors/index.html](https://jofaval.github.io/learn-it/examples/selectors/index.html).\n\n## What is specificity?\n\n[Back to the top](#contents)\n\nIt's the good fix to avoid using **`!important`**, and to understand why, at times, it seems like the only option available.\n\nCSS are Cascading Style-Sheets, cascading means that there's inheritance, and that inheritance can overwrite your styles. You could change the order in which you import your styles, but that won't always fix the solution, you'd be fixing the surface, but not the root.\n\nSpecificity are the points given to a CSS selector that determine it's priority, when two selects have the same specificity, the latter will apply.\n\n### Points system\n\n[Back to the top](#contents)\n\n- **`html-tag`**, _1 point per element_, the lowest of them all, a simple html tag.\n- **`.my-class`**, _10 points per class_, a CSS class given to an HTML element.\n- **`#uniqueId`**, _100 points per identifier_, a unique id given to an HTML element.\n- **`!important`**, _1000 points_, whenever a rule has **`!important`** as a suffix, only one per rule, and it can be overwritten.\n- **`inline`**, _1000 points_, when styles are applied to the `style=\"\"` attribute of an element, only one per HTML element and rule, and it can be overwritten.\n\n## Usage\n\n[Back to the top](#contents)\n\nUser interface should and will be added later on, at the moment, only scripts are avaible.\n\n### Javascript\n\n[Back to the top](#contents)\n\nImplement user interaction, at this point in time, requires javascript. It's also a widely used and understand language.\n\nOn a Linux/Unix system:\n\n```bash\nnode ./src/utils/specificity.utils.js\n```\n\nOn a Windows system\n\n```bash\nnode ./src/utils/specificity.utils.js\n```\n\n### Python\n\n[Back to the top](#contents)\n\nAt first, I intended to only use python, and to add it to my [utilities' repository](https://github.com/jofaval/utilities), but it'd be damn useful to use it with javascript aswell.\n\nOn a Linux/Unix system:\n\n```bash\npython3 ./src/utils/specificity.utils.py\n```\n\nOn a Windows system\n\n```bash\npython ./src/utils/specificity.utils.py\n```\n\n## License\n\n[Back to the top](#contents)\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjofaval%2Fcss-specificity-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjofaval%2Fcss-specificity-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjofaval%2Fcss-specificity-calculator/lists"}