| # stylelint-config-standard |
| |
| [](https://www.npmjs.org/package/stylelint-config-standard) [](https://github.com/stylelint/stylelint-config-standard/actions) |
| |
| > The standard shareable config for Stylelint. |
| |
| It extends [`stylelint-config-recommended`](https://github.com/stylelint/stylelint-config-recommended) and turns on additional rules to enforce modern conventions found in the [CSS specifications](https://www.w3.org/Style/CSS/current-work) and within [Baseline Widely Available](https://web.dev/baseline). |
| |
| To see the rules that this config uses, please read the [config itself](./index.js). |
| |
| ## Example |
| |
| ```css |
| @import url("foo.css"); |
| @import url("bar.css"); |
| |
| @custom-media --foo (min-width: 30em); |
| |
| /** |
| * Multi-line comment |
| */ |
| |
| :root { |
| --brand-red: hsl(5deg 10% 40%); |
| } |
| |
| /* Single-line comment */ |
| |
| .class-foo:not(a, div) { |
| margin: 0; |
| top: calc(100% - 2rem); |
| } |
| |
| /* Flush single line comment */ |
| @media (width >= 60em) { |
| #id-bar { |
| /* Flush to parent comment */ |
| --offset: 0px; |
| |
| color: #fff; |
| font-family: Helvetica, "Arial Black", sans-serif; |
| left: calc(var(--offset) + 50%); |
| } |
| |
| @layer layer-foo.layer-bar { |
| a::after { |
| display: block; |
| content: "→"; |
| background-image: url("x.svg"); |
| } |
| } |
| } |
| |
| @keyframes fade-in { |
| from { |
| opacity: 0; |
| } |
| |
| /* Flush nested single line comment */ |
| to { |
| opacity: 1; |
| } |
| } |
| ``` |
| |
| _Note: the config is tested against this example, as such the example contains plenty of CSS syntax and features._ |
| |
| ## Installation |
| |
| ```bash |
| npm install stylelint-config-standard --save-dev |
| ``` |
| |
| ## Usage |
| |
| Set your Stylelint config to: |
| |
| ```json |
| { |
| "extends": "stylelint-config-standard" |
| } |
| ``` |
| |
| ### Extending the config |
| |
| Add a `"rules"` key to your config, then add your overrides and additions there. |
| |
| You can turn off rules by setting its value to `null`. For example: |
| |
| ```json |
| { |
| "extends": "stylelint-config-standard", |
| "rules": { |
| "selector-class-pattern": null |
| } |
| } |
| ``` |
| |
| Or lower the severity of a rule to a warning using the `severity` secondary option. For example: |
| |
| ```json |
| { |
| "extends": "stylelint-config-standard", |
| "rules": { |
| "property-no-vendor-prefix": [ |
| true, |
| { |
| "severity": "warning" |
| } |
| ] |
| } |
| } |
| ``` |
| |
| Or to add a rule, For example, the `unit-allowed-list` one: |
| |
| ```json |
| { |
| "extends": "stylelint-config-standard", |
| "rules": { |
| "unit-allowed-list": ["em", "rem", "s"] |
| } |
| } |
| ``` |
| |
| We recommend adding more of [Stylelint's rules](https://stylelint.io/user-guide/rules/) to your config as these rules need to be configured to suit your specific needs. |
| |
| ## [Changelog](CHANGELOG.md) |
| |
| ## [License](LICENSE) |