{"id":13659566,"url":"https://github.com/josh/css-explain","last_synced_at":"2025-10-22T16:17:05.444Z","repository":{"id":3054769,"uuid":"4076599","full_name":"josh/css-explain","owner":"josh","description":"SQL EXPLAIN for CSS selectors","archived":true,"fork":false,"pushed_at":"2015-07-25T19:10:44.000Z","size":311,"stargazers_count":1070,"open_issues_count":0,"forks_count":50,"subscribers_count":41,"default_branch":"master","last_synced_at":"2024-05-09T21:26:13.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://josh.github.io/css-explain/","language":"JavaScript","has_issues":false,"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/josh.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":"2012-04-19T15:14:42.000Z","updated_at":"2024-04-28T08:03:49.000Z","dependencies_parsed_at":"2022-09-11T17:11:36.843Z","dependency_job_id":null,"html_url":"https://github.com/josh/css-explain","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh%2Fcss-explain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh%2Fcss-explain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh%2Fcss-explain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josh%2Fcss-explain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josh","download_url":"https://codeload.github.com/josh/css-explain/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234555864,"owners_count":18851860,"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-08-02T05:01:10.150Z","updated_at":"2025-09-28T19:31:43.899Z","avatar_url":"https://github.com/josh.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"CSS `EXPLAIN`\n=============\n\nThink of it like SQL `EXPLAIN`, but for CSS selectors.\n\n\n## Usage\n\n``` javascript\ncssExplain(\"li .item\")\n{\n  \"selector\": \"li .item\",\n  \"parts\": [\"li\", \".item\"],\n  \"specificity\": [0, 1, 1],\n  \"category\": \"class\",\n  \"key\": \"item\",\n  \"score\": 6\n}\n```\n\n### Results\n\n#### selector\n\nThe String selector input.\n\n#### parts\n\nParsed Array of selector components.\n\n#### specificity\n\nComputed Array of specificy values.\n\nSee [W3C calcuating selector specificity](http://www.w3.org/TR/CSS21/cascade.html#specificity).\n\n#### category\n\nCategory index key selector falls under. Either `'id'`, `'class'`, `'tag'` or `'universal'`.\n\nModeled after WebKit's rule set grouping optimizations. CSS rules in WebKit are indexed and grouped in a hash table to avoid having to do a full test on the element being matched. So its better to have selectors fall under unique id or class indexes rather than under more broad indexes like tags. Selectors in the universal category will always have to be tested against every element.\n\n``` json\n{\n  \"id\": {\n    \"about\": [\"#about\"]\n  },\n  \"class\": {\n    \"item\": [\"li .item\"],\n    \"menu\": [\"ul.menu\"],\n    \"minibutton\": [\".minibutton\"]\n  },\n  \"tag\": {\n    \"a\": [\"ul.menu a\", \".message a\"],\n    \"span\": [\".nav \u003e span\"]\n  },\n  \"universal\": [\"*\", \"[input=text]\"]\n}\n```\n\nTo match against `\u003ca class=\"minibutton\"\u003e`, the rule set would include `class -\u003e minibutton`, `tag -\u003e a` and `universal` which is `[\".minibutton\", \"ul.menu a\", \".message a\", \"*\", \"[input=text]\"]`.\n\nSee [`RuleSet::addRule`](https://github.com/WebKit/webkit/blob/d674eba907a703e8b840d9941d19888de6cf7438/Source/WebCore/css/StyleResolver.cpp#L2589-L2627) for reference.\n\n#### key\n\nHash used for indexing under the category.\n\n#### score\n\n1-10 rating. 1 being the most efficient and 10 being the least.\n\n*NOTE: Don't take this value so seriously*\n\n#### messages\n\nArray of infomational reasons for why the score was computed.\n\n\n## Contributing\n\n\n    $ git clone https://github.com/josh/css-explain.git\n    $ cd css-explain/\n\nRun tests\n\n    $ make test\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosh%2Fcss-explain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosh%2Fcss-explain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosh%2Fcss-explain/lists"}