CSS Style Guide

.csscomb.json

{
  "remove-empty-rulesets": true,
  "always-semicolon": true,
  "color-case": "upper",
  "block-indent": "  ",
  "color-shorthand": true,
  "element-case": "lower",
  "eof-newline": true,
  "leading-zero": false,
  "quotes": "double",
  "space-before-colon": "",
  "space-after-colon": " ",
  "space-before-combinator": " ",
  "space-after-combinator": " ",
  "space-between-declarations": "\n",
  "space-before-opening-brace": " ",
  "space-after-opening-brace": "\n",
  "space-after-selector-delimiter": "\n",
  "space-before-selector-delimiter": "",
  "space-before-closing-brace": "\n",
  "strip-spaces": true,
  "tab-size": true,
  "unitless-zero": true,
  "sort-order-fallback": "abc",
  "sort-order": [
    [
      "content",
      "quotes",
      "display",
      "visibility",
      "position",
      "z-index",
      "top",
      "right",
      "bottom",
      "left",
      "box-sizing",
      "grid",
      "grid-after",
      "grid-area",
      "grid-auto-columns",
      "grid-auto-flow",
      "grid-auto-rows",
      "grid-before",
      "grid-column",
      "grid-column-end",
      "grid-column-gap",
      "grid-column-start",
      "grid-columns",
      "grid-end",
      "grid-gap",
      "grid-row",
      "grid-row-end",
      "grid-row-gap",
      "grid-row-start",
      "grid-rows",
      "grid-start",
      "grid-template",
      "grid-template-areas",
      "grid-template-columns",
      "grid-template-rows",
      "flex",
      "flex-basis",
      "flex-direction",
      "flex-flow",
      "flex-grow",
      "flex-shrink",
      "flex-wrap",
      "align-content",
      "align-items",
      "align-self",
      "justify-content",
      "order",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "clip",
      "zoom",
      "columns",
      "column-gap",
      "column-fill",
      "column-rule",
      "column-span",
      "column-count",
      "column-width",
      "table-layout",
      "empty-cells",
      "caption-side",
      "border-spacing",
      "border-collapse",
      "list-style",
      "list-style-position",
      "list-style-type",
      "list-style-image",
      "transform",
      "transform-origin",
      "transform-style",
      "backface-visibility",
      "perspective",
      "perspective-origin",
      "transition",
      "transition-property",
      "transition-duration",
      "transition-timing-function",
      "transition-delay",
      "animation",
      "animation-name",
      "animation-duration",
      "animation-play-state",
      "animation-timing-function",
      "animation-delay",
      "animation-iteration-count",
      "animation-direction",
      "border",
      "border-top",
      "border-right",
      "border-bottom",
      "border-left",
      "border-width",
      "border-top-width",
      "border-right-width",
      "border-bottom-width",
      "border-left-width",
      "border-style",
      "border-top-style",
      "border-right-style",
      "border-bottom-style",
      "border-left-style",
      "border-radius",
      "border-top-left-radius",
      "border-top-right-radius",
      "border-bottom-left-radius",
      "border-bottom-right-radius",
      "border-color",
      "border-top-color",
      "border-right-color",
      "border-bottom-color",
      "border-left-color",
      "outline",
      "outline-color",
      "outline-offset",
      "outline-style",
      "outline-width",
      "stroke-width",
      "stroke-linecap",
      "stroke-dasharray",
      "stroke-dashoffset",
      "stroke",
      "opacity",
      "background",
      "background-color",
      "background-image",
      "background-repeat",
      "background-position",
      "background-size",
      "box-shadow",
      "fill",
      "color",
      "font",
      "font-family",
      "font-size",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-style",
      "font-variant",
      "font-weight",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "letter-spacing",
      "line-height",
      "list-style",
      "word-spacing",
      "text-align",
      "text-align-last",
      "text-decoration",
      "text-indent",
      "text-justify",
      "text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "text-rendering",
      "text-outline",
      "text-shadow",
      "text-transform",
      "text-wrap",
      "word-wrap",
      "word-break",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "vertical-align",
      "white-space",
      "word-spacing",
      "hyphens",
      "src",
      "tab-size",
      "counter-reset",
      "counter-increment",
      "resize",
      "cursor",
      "pointer-events",
      "speak",
      "user-select",
      "nav-index",
      "nav-up",
      "nav-right",
      "nav-down",
      "nav-left"
    ]
  ]
}

.sass-lint.yml

# Use this for Atom's linter-sass-lint
# https://github.com/AtomLinter/linter-sass-lint

options:
  formatter: stylish
files:
  include: '**/*.s+(a|c)ss'
rules:
  # Extends
  extends-before-mixins: 1
  extends-before-declarations: 1
  placeholder-in-extend: 1

  # Mixins
  mixins-before-declarations: 1

  # Line Spacing
  one-declaration-per-line: 1
  empty-line-between-blocks: 1
  single-line-per-selector: 1

  # Disallows
  no-attribute-selectors: 0
  no-color-hex: 0
  no-color-keywords: 1
  no-color-literals: 1
  no-combinators: 0
  no-css-comments: 1
  no-debug: 1
  no-disallowed-properties: 0
  no-duplicate-properties: 1
  no-empty-rulesets: 1
  no-extends: 0
  no-ids: 0
  no-important: 1
  no-invalid-hex: 1
  no-mergeable-selectors: 1
  no-misspelled-properties: 1
  no-qualifying-elements: 1
  no-trailing-whitespace: 1
  no-trailing-zero: 1
  no-transition-all: 1
  no-universal-selectors: 0
  no-url-domains: 1
  no-url-protocols: 1
  no-vendor-prefixes: 0
  no-warn: 1
  property-units: 0

  # Nesting
  declarations-before-nesting: 1
  force-attribute-nesting: 1
  force-element-nesting: 1
  force-pseudo-nesting: 1

  # Name Formats
  class-name-format:
    - 1
    -
      convention: 'hyphenatedbem'
  function-name-format: 1
  id-name-format: 0
  mixin-name-format: 1
  placeholder-name-format: 1
  variable-name-format: 1

  # Style Guide
  attribute-quotes: 1
  bem-depth: 0
  border-zero: 1
  brace-style: 1
  clean-import-paths: 1
  empty-args: 1
  hex-length: 1
  hex-notation: 1
  indentation: 1
  leading-zero: 1
  max-line-length: 0
  max-file-line-count: 0
  nesting-depth: 1
  property-sort-order:
    - 1
    -
      order:
        # Heading

        - 'content'
        - 'quotes'

        # Box

        - 'display'
        - 'visibility'

        - 'position'
        - 'z-index'
        - 'top'
        - 'right'
        - 'bottom'
        - 'left'

        - 'box-sizing'

        - 'flex'
        - 'flex-basis'
        - 'flex-direction'
        - 'flex-flow'
        - 'flex-grow'
        - 'flex-shrink'
        - 'flex-wrap'
        - 'align-content'
        - 'align-items'
        - 'align-self'
        - 'justify-content'
        - 'order'

        - 'width'
        - 'min-width'
        - 'max-width'
        - 'height'
        - 'min-height'
        - 'max-height'

        - 'margin'
        - 'margin-top'
        - 'margin-right'
        - 'margin-bottom'
        - 'margin-left'

        - 'padding'
        - 'padding-top'
        - 'padding-right'
        - 'padding-bottom'
        - 'padding-left'

        - 'float'
        - 'clear'

        - 'overflow'
        - 'overflow-x'
        - 'overflow-y'

        - 'clip'
        - 'zoom'

        - 'columns'
        - 'column-gap'
        - 'column-fill'
        - 'column-rule'
        - 'column-span'
        - 'column-count'
        - 'column-width'

        - 'table-layout'
        - 'empty-cells'
        - 'caption-side'
        - 'border-spacing'
        - 'border-collapse'
        - 'list-style'
        - 'list-style-position'
        - 'list-style-type'
        - 'list-style-image'

        # Animation

        - 'transform'
        - 'transform-origin'
        - 'transform-style'
        - 'backface-visibility'
        - 'perspective'
        - 'perspective-origin'

        - 'transition'
        - 'transition-property'
        - 'transition-duration'
        - 'transition-timing-function'
        - 'transition-delay'

        - 'animation'
        - 'animation-name'
        - 'animation-duration'
        - 'animation-play-state'
        - 'animation-timing-function'
        - 'animation-delay'
        - 'animation-iteration-count'
        - 'animation-direction'

        # Border

        - 'border'
        - 'border-top'
        - 'border-right'
        - 'border-bottom'
        - 'border-left'
        - 'border-width'
        - 'border-top-width'
        - 'border-right-width'
        - 'border-bottom-width'
        - 'border-left-width'

        - 'border-style'
        - 'border-top-style'
        - 'border-right-style'
        - 'border-bottom-style'
        - 'border-left-style'

        - 'border-radius'
        - 'border-top-left-radius'
        - 'border-top-right-radius'
        - 'border-bottom-left-radius'
        - 'border-bottom-right-radius'

        - 'border-color'
        - 'border-top-color'
        - 'border-right-color'
        - 'border-bottom-color'
        - 'border-left-color'

        - 'outline'
        - 'outline-color'
        - 'outline-offset'
        - 'outline-style'
        - 'outline-width'

        - 'stroke-width'
        - 'stroke-linecap'
        - 'stroke-dasharray'
        - 'stroke-dashoffset'
        - 'stroke'

        # Background

        - 'opacity'

        - 'background'
        - 'background-color'
        - 'background-image'
        - 'background-repeat'
        - 'background-position'
        - 'background-size'
        - 'box-shadow'
        - 'fill'

        # Text

        - 'color'

        - 'font'
        - 'font-family'
        - 'font-size'
        - 'font-size-adjust'
        - 'font-stretch'
        - 'font-effect'
        - 'font-style'
        - 'font-variant'
        - 'font-weight'

        - 'font-emphasize'
        - 'font-emphasize-position'
        - 'font-emphasize-style'

        - 'letter-spacing'
        - 'line-height'
        - 'list-style'
        - 'word-spacing'

        - 'text-align'
        - 'text-align-last'
        - 'text-decoration'
        - 'text-indent'
        - 'text-justify'
        - 'text-overflow'
        - 'text-overflow-ellipsis'
        - 'text-overflow-mode'
        - 'text-rendering'
        - 'text-outline'
        - 'text-shadow'
        - 'text-transform'
        - 'text-wrap'
        - 'word-wrap'
        - 'word-break'

        - 'text-emphasis'
        - 'text-emphasis-color'
        - 'text-emphasis-style'
        - 'text-emphasis-position'

        - 'vertical-align'
        - 'white-space'
        - 'word-spacing'
        - 'hyphens'

        - 'src'

        # Other

        - 'tab-size'
        - 'counter-reset'
        - 'counter-increment'
        - 'resize'
        - 'cursor'
        - 'pointer-events'
        - 'speak'
        - 'user-select'
        - 'nav-index'
        - 'nav-up'
        - 'nav-right'
        - 'nav-down'
        - 'nav-left'
  pseudo-element: 1
  quotes: 0
  shorthand-values: 1
  url-quotes: 1
  variable-for-property: 1
  zero-unit: 1

  # Inner Spacing
  space-after-comma: 1
  space-before-colon: 1
  space-after-colon: 1
  space-before-brace: 1
  space-before-bang: 1
  space-after-bang: 1
  space-between-parens: 1
  space-around-operator: 1

  # Final Items
  trailing-semicolon: 1
  final-newline: 1

.sasslintrc

# Use this for Node's sass-lint
# https://github.com/sasstools/sass-lint

options:
  formatter: stylish
  merge-default-rules: false
rules:

  # Flag issues that would require non-trivial refactoring as warnings
  class-name-format:
    - 1
    - convention: hyphenatedbem
  placeholder-name-format:
    - 1
    - convention: hyphenatedlowercase
  nesting-depth:
    - 1
    - max-depth: 3
  no-ids: 1
  no-important: 1
  no-misspelled-properties:
    - 1
    - extra-properties:
       - "-moz-border-radius-topleft"
       - "-moz-border-radius-topright"
       - "-moz-border-radius-bottomleft"
       - "-moz-border-radius-bottomright"
  variable-name-format:
    - 1
    - allow-leading-underscore: true
      convention: hyphenatedlowercase
  no-extends: 1

  # Flag items that are preferential rather than mandatory as warnings
  no-css-comments: 1

  # Flag more easily resolved items are errors
  indentation:
    - 2
    - size: 2
  final-newline:
    - 2
    - include: true
  no-trailing-whitespace: 2
  border-zero:
    - 2
    - convention: '0'
  brace-style:
    - 2
    - allow-single-line: true
  clean-import-paths:
    - 2
    - filename-extension: false
      leading-underscore: false
  no-debug: 2
  no-empty-rulesets: 2
  no-invalid-hex: 2
  no-mergeable-selectors: 2
  no-trailing-zero: 2
  no-url-protocols: 2
  quotes:
    - 2
    - style: double
  space-after-bang:
    - 2
    - include: false
  space-after-colon:
    - 2
    - include: true
  space-after-comma:
    - 2
    - include: true
  space-before-bang:
    - 2
    - include: true
  space-before-brace:
    - 2
    - include: true
  space-before-colon: 2
  space-between-parens:
    - 2
    - include: false
  trailing-semicolon: 2
  url-quotes: 2
  single-line-per-selector: 2
  one-declaration-per-line: 2
  empty-line-between-blocks: 2
  zero-unit: 2

smacss-property-order.txt

# based on SMACSS Property Order
# http://smacss.com/book/formatting
# https://github.com/brigade/scss-lint/edit/master/data/property-sort-orders/smacss.txt

# Heading

content
quotes

# Box

display
visibility

position
z-index
top
right
bottom
left

box-sizing

grid
grid-after
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-before
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-columns
grid-end
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-rows
grid-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
align-content
align-items
align-self
justify-content
order

width
min-width
max-width
height
min-height
max-height

margin
margin-top
margin-right
margin-bottom
margin-left

padding
padding-top
padding-right
padding-bottom
padding-left

float
clear

overflow
overflow-x
overflow-y

clip
zoom

columns
column-gap
column-fill
column-rule
column-span
column-count
column-width

table-layout
empty-cells
caption-side
border-spacing
border-collapse
list-style
list-style-position
list-style-type
list-style-image

# Animation

transform
transform-origin
transform-style
backface-visibility
perspective
perspective-origin

transition
transition-property
transition-duration
transition-timing-function
transition-delay

animation
animation-name
animation-duration
animation-play-state
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

# Border

border
border-top
border-right
border-bottom
border-left
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width

border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

outline
outline-color
outline-offset
outline-style
outline-width

stroke-width
stroke-linecap
stroke-dasharray
stroke-dashoffset
stroke

# Background

opacity

background
background-color
background-image
background-repeat
background-position
background-size
box-shadow
fill

# Text

color

font
font-family
font-size
font-size-adjust
font-stretch
font-effect
font-style
font-variant
font-weight

font-emphasize
font-emphasize-position
font-emphasize-style

letter-spacing
line-height
list-style
word-spacing

text-align
text-align-last
text-decoration
text-indent
text-justify
text-overflow
text-overflow-ellipsis
text-overflow-mode
text-rendering
text-outline
text-shadow
text-transform
text-wrap
word-wrap
word-break

text-emphasis
text-emphasis-color
text-emphasis-style
text-emphasis-position

vertical-align
white-space
word-spacing
hyphens

src

# Other

tab-size
counter-reset
counter-increment
resize
cursor
pointer-events
speak
user-select
nav-index
nav-up
nav-right
nav-down
nav-left

Convenient config builder for CSScomb: http://csscomb.com/config