An example of style lint to write CSS and SASS

stylelint-example.json

{
  "plugins": [
    "stylelint-a11y"
  ],
  "rules": {
    "color-named": [
      "never",
      {
        "message": "Use atomic color classes or SCSS variables instead of a bespoke color."
      }
    ],
    "color-no-hex": [
      true,
      {
        "message": "Use atomic color classes or SCSS variables instead of a bespoke color."
      }
    ],
    "declaration-no-important": true,
    "declaration-property-unit-whitelist": [
      {
        "font-size": [
          "rem"
        ],
        "width": [
          "em, %"
        ],
        "height": [
          "em, %"
        ],
        "/^padding/": [
          "em"
        ],
        "/^margin/": [
          "em"
        ],
        "text-indent": [
          "em"
        ],
        "/border/": [
          "em"
        ],
        "top": [
          "em, %"
        ],
        "left": [
          "em, %"
        ],
        "right": [
          "em, %"
        ],
        "bottom": [
          "em, %"
        ]
      },
      {
        "message": "Use rem for font-sizing, em or % for spacing."
      }
    ],
    "declaration-property-value-blacklist": [
      {
        "outline": [
          "none",
          "/^0\\s*\\w{2}/",
          "transparent",
          "/^(rgba|hsla)\\((\\d+,\\s*){3}0\\)$/"
        ],
        "outline-width": [
          "/^0$|^0\\w/"
        ],
        "outline-style": [
          "none"
        ],
        "outline-color": [
          "transparent",
          "/^(rgba|hsla)\\((\\d+,\\s*){3}0\\)$/"
        ],
        "caret-color": [
          "transparent",
          "/^(rgba|hsla)\\((\\d+,\\s*){3}0\\)$/"
        ],
        "flex-direction": [
          "row-reverse",
          "column-reverse"
        ]
      },
      {
        "message": "do not nullify outline styling unless accessible :focus styling is also applied."
      }
    ],
    "declaration-property-value-whitelist": [
      {
        "opacity": [
          0,
          1
        ],
        "transition": "/^opacity$|^transform$|^transform,?\\s*opacity$|^opacity,?\\s*transform$/|^none$",
        "transition-property": "/^opacity$|^transform$|^transform,?\\s*opacity$|^opacity,?\\s*transform$/|^none$"
      },
      {
        "message": "Transitioning properties other than opacity and transform causes a reflow or a repaint and can negatively affect performance. Setting an opacity other than 0 or 1 changes the background color and introduces a new stacking context."
      }
    ],
    "font-family-no-duplicate-names": true,
    "function-blacklist": [
      [
        "rgba",
        "hsla",
        "hsl",
        "rgb"
      ],
      {
        "message": "Use atomic color classes or SCSS variables instead of a bespoke color. Do not use alpha channel functions (rgba, hsla) to 'lighten' a color."
      }
    ],
    "length-zero-no-unit": true,
    "max-nesting-depth": [
      1,
      {
        "ignore": [
          "blockless-at-rules",
          "pseudo-classes"
        ]
      }
    ],
    "property-blacklist": [
      [
        "/^(background-)?color$/",
        "/^font/",
        "/^text(?!-overflow)/",
        "direction",
        "letter-spacing",
        "line-height",
        "text-transform",
        "user-select",
        "user-zoom",
        "word-spacing",
        "z-index"
      ],
      {
        "message": "font-*, text-*, letter-spacing, word-spacing, and line-height properties should only be set in conjunction with the font-family. text-transform incorrectly capitalizes some (non-English) characters and should never be used. Flexbox properties should be used instead of text-align. Instead of using z-index, re-structure HTML to use native browser stacking."
      }
    ],
    "selector-pseudo-element-blacklist": [
      [
        "selection",
        "first-letter",
        "first-line",
        "placeholder"
      ],
      {
        "message": "first-letter and first-line pseudo-elements do not work correctly with some non-English characters. Changing selection pseudo-element styles is an accessibility concern, especially when modifying the color and/or background-color."
      }
    ],
    "selector-max-specificity": "0,3,1",
    "selector-max-attribute": 1,
    "selector-max-class": 2,
    "selector-max-combinators": 2,
    "selector-max-compound-selectors": 2,
    "selector-max-empty-lines": 0,
    "selector-max-id": 0,
    "selector-max-pseudo-class": 2,
    "selector-max-universal": [
      0,
      {
        "severity": "warning"
      }
    ],
    "selector-no-qualifying-type": true,
    "time-min-milliseconds": [
      150,
      {
        "severity": "warning"
      }
    ],
    "unit-blacklist": [
      "px",
      "in",
      "cm",
      "mm",
      "q",
      "pt",
      "pc",
      "ex",
      "ch"
    ],
    "a11y/media-prefers-reduced-motion": true,
    "a11y/no-outline-none": true,
    "a11y/selector-pseudo-class-focus": true,
    "a11y/content-property-no-static-value": true,
    "a11y/font-size-is-readable": [
      true,
      {
        "severity": "warning"
      }
    ],
    "a11y/no-obsolete-attribute": [
      true,
      {
        "severity": "warning"
      }
    ],
    "a11y/no-obsolete-element": [
      true,
      {
        "severity": "warning"
      }
    ]
  }
}