CSS Linting

To enforce consistency across all our (S)?CSS, we are using a linter to help enforce code quality in (S)?CSS files. These rules are implemented by the stylelint package and are chained to the pre-commit hook to enforce compliance with code quality.

To install: yarn add stylelint

To execute on a single file: stylelint {name-of-file.SCSS}

Presently, the stylelint reads the rules found here from the .styelintrc.json file and implements them. These rules can be modified extensively to suit any convention. To write or modify a rule you can find information on that here.

PS: All units should be relative units (rem, not em).

{
  "rules": {

/* Require or disallow an empty line before at-rules */
    "at-rule-empty-line-before": [ "always", {
      "except": [
        "first-nested", // except for the first selector
        "blockless-after-same-name-blockless" // import statements can be grouped together
      ],
      "ignore": [
        "after-comment"
      ]
    } ],
 
/* Use lower casing in classnames, ids and selectors */
    "at-rule-name-case": "lower",
 
/* Rule names on a single line */
    "at-rule-name-space-after": "always-single-line",

/* No invalid hex colors */
    "color-no-invalid-hex": true,
 
/* Always have a space after a brace */
    "block-opening-brace-space-before": "always",
 
/* hex colors should be captalized */
    "color-hex-case": "upper",
 
/* No named color convention */
    "color-named": "never",
 
/* Decalrations should have a space after the colon */
    "declaration-colon-space-after": "always",
 
/* Each decalrations should be on a line newline after the semicolon */
    "declaration-block-semicolon-newline-after":"always",
 
/* No duplicate declarations */
    "declaration-block-no-duplicate-properties": true,
 
/* No duplicate declarations */
    "font-family-no-duplicate-names": true,
    "indentation": 2,
    "max-empty-lines": 1,
    "no-duplicate-at-import-rules": true,
    "no-duplicate-selectors": true,
    "no-empty-source": true,
    "no-extra-semicolons": true,
    "no-invalid-double-slash-comments": true,
 
/* Begin arguments for nested selectors on new line unless there is a comment */
    "rule-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    } ],
 
/* blacklisted units */
    "unit-blacklist": ["em"]
  }
}