Last active
April 16, 2018 19:35
-
-
Save tomanistor/b6d3294b89b9fb3770b7e40460ec8176 to your computer and use it in GitHub Desktop.
CSS Style Guide
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| ] | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Convenient config builder for CSScomb: http://csscomb.com/config