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, 😨: Error

• 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 attribute selectors' case-sensitivity require the i identifier. See stylelint-attribute-case-sensitivity for details.
  • 😨 [type="foo"] { }
  • 🙂 [type="foo" i] { }
• CSS nesting must use the & nesting selector.
  • 😨 .foo { .bar {} }
  • 🙂 .foo { &.bar {} }
• Disallow !important within declarations.
  • 😨 color: #000 !important
  • 🙂 color: #000
• The order of properties within declaration blocks follows stylelint-config-concentric-order.
  • 😨 .foo { padding: 1em; margin: 1em }
  • 🙂 .foo { margin: 1em; padding: 1em }
• 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: 100lvw
  • 🙂 inline-size: 100lvi
• Disallow default viewport-percentage units. The stylelint-no-default-viewport plugin is used.
  • 😨 inline-size: 10vi
  • 🙂 inline-size: 10lvi
• Do not use white-space shorthand property because its definition became complex in CSS Text Module Level 4.
  • 😨 white-space: pre-wrap
  • 🙂 white-space-collapse: preserve;
• The font-weight value must be numbers.
  • 😨 font-weight: normal
  • 🙂 font-weight: 500 /* Windows + Yu Gothic measures to be greater than 400 */
• 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 }

See source code for other details.

Usage

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