Proposed scss-lint rules

.scss-lint.yaml

linters:

  # ENABLED:

  # "border: 0" not "border: none"
  BorderZero:
    enabled: true

  # No capitals in selectors
  CapitalizationInSelector:
    enabled: true

  # "#0f0" not "green"
  ColorKeyword:
    enabled: true

  # Disallow "@debug"
  DebugStatement:
    enabled: true

  # @extend must come first, then properties, then nested rulesets
  DeclarationOrder:
    enabled: true

  # Require a newline at the end of the file
  FinalNewline:
    enabled: true
    present: true

  # #12346 good, #123 bad.
  HexLength:
    enabled: true
    style: long

  # Require hex colors to be lowercase (if they include any of the letters a-f)
  HexNotation:
    enabled: true
    style: lowercase

  # Hex colors must be actual colors (ie not #ab or #00mm00)
  HexValidation:
    enabled: true

  # Disallow combining of ID selectors with other selector tokens
  IdWithExtraneousSelector:
    enabled: true

  # 0.1 not .1
  # (differs from Guardian)
  LeadingZero:
    enabled: true
    style: include_zero

  # @extend %placeholders, don't @extend .a-class
  PlaceholderInExtend:
    enabled: true

  # Disallow unknown CSS property names
  PropertySpelling:
    enabled: true
    extra_properties: []

  # Limit selector depth
  SelectorDepth:
    enabled: true
    max_depth: 3

  # margin: 1px not margin: 1px 1px 1px 1px; 
  Shorthand:
    enabled: true

  # rgb(0, 0, 0) not rgb(0,0,0)
  SpaceAfterComma:
    enabled: true

  # margin: 0px not margin:0px
  SpaceAfterPropertyColon:
    enabled: true

  # margin: 0px not margin : 0px
  # (AB: clearly this should be called NoSpaceAfterPropertyName)
  SpaceAfterPropertyName:
    enabled: true

  # .thing { not .thing{
  SpaceBeforeBrace:
    enabled: true
    allow_single_line_padding: false

  # rgb(0,0,0) not rgb( 0,0,0 )
  SpaceBetweenParens:
    enabled: true
    spaces: 0

  # Every property value must end with a semicolon
  TrailingSemicolonAfterPropertyValue:
    enabled: true

  # No unnecessary fractions: 1 not 1.0
  UnnecessaryMantissa:
    enabled: true

  # Disallow more than one ruleset with the same selector in the same file
  MergeableSelector:
    enabled: true

  # Rulesets with multiple (comma delimited) selectors must have each selector on a separate line
  SingleLinePerSelector:
    enabled: true


  # DISABLED

  # Disallow use of the same property more than once in the same ruleset
  # (AB: Sometimes we need to do this for progressively enhanced styles)
  DuplicateProperty:
    enabled: false

  # // not /**/
  Comment:
    enabled: false

  # Use single quotes, not double quotes
  # (AB: This really doesn't matter IMHO)
  # Differs from guardian
  StringQuotes:
    enabled: false

  # URLs must not contain domain names
  # (AB: We may want to use build service or responsive image proxy)
  UrlFormat:
    enabled: false

  # url("example.com") not url(example.com)
  UrlQuotes:
    enabled: false

  # No units on zero values: 0 not 0px
  # (AB: it can be useful to express what unit you want something to be in if its value is ever adjusted away from zero)
  ZeroUnit:
    enabled: false

  # Require an empty line between rulesets
  EmptyLineBetweenBlocks:
    enabled: false

  # Disallow empty rulesets
  EmptyRule:
    enabled: false

  # Require spaces for indentation
  # (AB: Absolutely not.  Revelation: tabs are designed to indent stuff)
  # (differs from Guardian)
  Indentation:
    enabled: false

  # Disallow camelcase and enforce BEM standards
  # (AB: we have exceptions, we use camel for mixins and functions)
  NameFormat:
    enabled: false
    convention: BEM

  # Require properties to be in alphabetical order (also possible to specify a specific order)
  # (AB: Alpha seems a bit weird.  Rhys had a tool to do this, maybe we should set the order here and use this tool)
  PropertySortOrder:
    enabled: false
    order: []

  # 0.1 not .1
  # (differs from Guardian)
  LeadingZero:
    enabled: true
    style: include_zero

Why? That's not my preference.

  # rgb(0,0,0) not rgb( 0,0,0 )
  SpaceBetweenParens:
    enabled: true
    spaces: 0

Comment example should be rgb(0, 0, 0)

  # Require properties to be in alphabetical order (also possible to specify a specific order)
  # (AB: Alpha seems a bit weird.  Rhys had a tool to do this, maybe we should set the order here and use this tool)
  PropertySortOrder:
    enabled: false
    order: []

Don't like alpha order either. Prefer to group properties together. eg width, height; top, left, right bottom.

Looks good, although I'm not sure about these two rules:

---

  # Disallow use of the same property more than once in the same ruleset
  DuplicateProperty:
    enabled: true

This means you can't do this:

.box {
  background: #fff;
  background: rgba(255, 255, 255, .5);
}

Arguably we could say the fallback colour should be targeted at a specific useragent class selector, but that adds a certain amount of complexity for what could otherwise be simple.

Unfortunately it seems scss-lint doesn't allow you to specify a whitelist of exceptions to this rule.

We could keep the rule as it is, and just accept we'll get a lint warning when you do this, but that means we can't have a rule saying there must be no warnings at all.

---

  # Rulesets with multiple (comma delimited) selectors must have each selector on a separate line
  SingleLinePerSelector:
    enabled: false

This conflicts with the Origami spec:

When listing multiple comma-separated selectors, each one must be placed on a new line.

Allow block comments
DuplicateProperty should be allowed (Dan)
Leading Zeros should be there,
MergeableSelector true
Standardise tabs for indentation
Use a tool to standardise sort order
SingleLinePerselector should be true

Updated.