{"id":19308097,"url":"https://github.com/csswizardry/nudge","last_synced_at":"2025-04-30T13:40:33.791Z","repository":{"id":58229609,"uuid":"46203957","full_name":"csswizardry/nudge","owner":"csswizardry","description":"Warn developers about improper selector usage","archived":false,"fork":false,"pushed_at":"2016-02-26T13:21:21.000Z","size":34,"stargazers_count":225,"open_issues_count":1,"forks_count":5,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-25T12:09:31.893Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csswizardry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-15T04:16:41.000Z","updated_at":"2024-01-17T15:49:39.000Z","dependencies_parsed_at":"2022-08-31T09:42:21.624Z","dependency_job_id":null,"html_url":"https://github.com/csswizardry/nudge","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fnudge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fnudge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fnudge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fnudge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csswizardry","download_url":"https://codeload.github.com/csswizardry/nudge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251713223,"owners_count":21631505,"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-11-10T00:13:40.766Z","updated_at":"2025-04-30T13:40:33.760Z","avatar_url":"https://github.com/csswizardry.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nudge\n\n**Give developers a gentle push in the right direction.**\n\nNudge is an opinionated, ITCSS-compatible library that detects misuse of certain\nCSS selectors, and gives developers a subtle nudge to fix them. Mistakes and\nincorrect usage get highlighted in the UI.\n\n![Screenshot showing a simple example of Nudge at work](./screenshot-001.png)\n\n## Installation\n\n    $ bower install --save-dev nudgecss\n\nOr:\n\n    $ npm install --save-dev nudgecss\n\n## Disclaimers and Notices\n\n1. **This is not an active OSS project.** Please feel free to use Nudge in your\n   projects, but be aware that this repository exists mainly for me and my\n   clients to use in our work. It’s opinionated, has limited scope, and is not\n   actively seeking contributions. If do have something you feel is a worthy\n   addition within this scope, open an issue.\n2. **This is crude. Very crude.** The CSS in Nudge is actively bad. It’s\n   circumstantial at best. Nudge is intended to be a very loose, high-level\n   linter, and probably will miss things or give false positives. I’m okay with\n   that—I just want Nudge to be a quick ’n’ dirty, cheap ’n’ cheerful first pass\n   over the UI. For what it needs to do, Nudge is GoodEnough™ for now. More\n   strict and stringent tools should be used if that’s what you require.\n3. **Remove Nudge from production.** Nudge will fill your stylesheet full of\n   crap: please make sure you remove Nudge before putting any CSS live. This\n   will help performance, but will also ensure that your users never see any\n   errors or breakages that your developers have missed.\n\n## Usage\n\nUsing Nudge is relatively simple. For more in-depth information and\ndocumentation, please see the comments in the relevant files.\n\n### Including in your project\n\n* `@import` `_tools.nudge.scss` into your _Tools_ layer (if you are not using\n  ITCSS, `@import` it somewhere toward the beginning of your project).\n* `@import` `_trumps.nudge.scss` into your _Trumps_ layer (if you are not using\n  ITCSS, `@import` it somewhere toward the end of your project).\n\n### Configuring\n\nYou can disable Nudge features by setting `$nudge-[feature]` to `false` just\nbefore you `@import` `_tools.nudge.scss`, e.g.:\n\n```scss\n$nudge-single-spaces:         false;\n$nudge-underscores:           false;\n$nudge-camel-case:            false;\n@import \"tools.nudge\";\n```\n\nThis will stop Nudge from reporting on the use of single spaces in class\nattributes, the use of underscores in class names, and the use of camel case\nin class names.\n\n#### Incorrect Nesting\n\nTo check for incorrect nesting of a class, call the `nudge-nest()` mixin within\nit, passing in the expected ancestor. For example, in our HTML, `.widget__title`\nmust always live inside of `.widget`, so in our Sass we would write:\n\n```scss\n.widget {\n  [styles]\n}\n\n  .widget__title {\n    @include nudge-nest('.widget');\n    [styles]\n  }\n```\n\nNow we will see an error in our UI if `.widget__title` is used outside of the\ncontext of `.widget`.\n\n#### Deprecated Selectors\n\nTo configure our deprecated selectors, simply copy/paste the\n`$nudge-deprecated-selectors-list` map out of `_trumps.nudge.scss` and into your\nmanifest file (e.g. `main.scss`). Place it just before your `@import` for the\n`_trumps.nudge.scss` file, then delete the `!default` flag and replace the\nexample selectors with your own, e.g.:\n\n```scss\n$nudge-deprecated-selectors-list: (\n  '.btn': '.c-btn',\n);\n@import \"trumps.nudge\";\n```\n\n## The Rules\n\n* **Incorrect Nesting:** Check that a selector hasn’t been used outside of its\n  required context. Display an error if it has.\n* **No IDs** We shouldn’t use IDs in CSS, so display a warning any time we find\n  one.\n* **Single-Space Delimited `class` Attributes:** Prefer two spaces separating\n  individual strings in the `class` attribute. Display a warning if we find\n  single spaces.\n* **Improper Use of BEM Modifiers:** Display an error if someone tries to use\n  a Modifier without also having defined a Block.\n* **Underscores as Delimiters:** We use hyphens to delimit strings, so display\n  a warning if we find any classes with single hyphens.\n* **Use of Camel Case:** We do not use camel case, so display a warning if we\n  find any capital letters in a class.\n* **Deprecated Selectors:** Display a warning if we find any classes that we\n  have deemed deprecated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsswizardry%2Fnudge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsswizardry%2Fnudge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsswizardry%2Fnudge/lists"}