stylelint-config

Stylelint configuration file used on my personal website (w0s.jp).

Features

It is based on stylelint-config-standard with its own rule settings.

🙂: No problem, 🙁: Warning, 😨: Error

• Disallow !important within declarations.
  • 🙁 color: #000 !important
  • 🙂 color: #000
• Multi-keyword syntax is recommended for the display property. The stylelint-display-multi-keyword plugin is used.
  • 🙁 display: block
  • 🙂 display: block flow
• Use of CSS physical properties and values is not recommended. Use logical properties and values. The stylelint-plugin-logical-css plugin is used.
  • 🙁 margin-top: 1em
  • 🙂 margin-block-start: 1em
  • 🙁 text-align: right
  • 🙂 text-align: end
  • 🙂 overflow-x: visible (The overflow-* logical properties is not well supported by browsers)
• Use of CSS physical utils is not recommended. Use logical utils. The stylelint-plugin-logical-css plugin is used.
  • 🙁 inline-size: 100vw
  • 🙂 inline-size: 100vi
• Do not use ID selector.
  • 😨 #foo {}
  • 🙂 .foo {}
• Do not use multiple universal selectors. However, this excludes the use of a next-sibling combinator (+).
  • 🙂 * {}
  • 😨 * > * {}
  • 🙂 * + * {} (This is used in the "owl selector" in stack layout)
• The font-weight value must be numbers.
  • 😨 font-weight: normal
  • 🙂 font-weight: 500 /* Windows + Yu Gothic measures to be greater than 400 */
• CSS nesting must use the & nesting selector.
  • 😨 .foo { .bar {} }
  • 🙂 .foo { &.bar {} }
• For the root element, color and background-color must be specified as a set. See stylelint-root-colors for details.
  • 😨 :root { color: #000 }
  • 🙂 :root { background-color: #fff; color: #000 }
• The order of properties within declaration blocks follows stylelint-config-concentric-order.
  • 😨 .foo { padding: 1em; margin: 1em }
  • 🙂 .foo { margin: 1em; padding: 1em }

See source code for other details.

Usage

{
  "extends": ["@w0s/stylelint-config"]
}