Skip to content

Latest commit

 

History

History
55 lines (46 loc) · 2.7 KB

README.md

File metadata and controls

55 lines (46 loc) · 2.7 KB
Raw

Sass

  • Sample
  • Default SCSS-Lint configuration
    • This configuration aligns with our team-wide guides below. It does not, however, enforce a particular class naming structure (SelectorFormat), which is a team decision to be made on a per-project basis.

Formatting

  • Use the SCSS syntax.
  • Use hyphens when naming mixins, extends, classes, functions & variables: span-columns not span_columns or spanColumns.
  • Use one space between property and value: width: 20px not width:20px.
  • Use a blank line above a selector that has styles.
  • Prefer hex color codes #fff or #FFF.
  • Avoid using shorthand properties for only one value: background-color: #ff0000;, not background: #ff0000;
  • Use // for comment blocks not /* */.
  • Use one space between selector and {.
  • Use double quotation marks.
  • Use only lowercase, except for hex or string values.
  • Don't add a unit specification after 0 values, unless required by a mixin.
  • Use a leading zero in decimal numbers: 0.5 not .5
  • Use space around operands: $variable * 1.5, not $variable*1.5
  • Avoid in-line operations in shorthand declarations (Ex. padding: $variable * 1.5 variable * 2)
  • Use parentheses around individual operations in shorthand declarations: padding: ($variable * 1.5) ($variable * 2);
  • Use double colons for pseudo-elements
  • Use a % unit for the amount/weight when using Sass's color functions: darken($color, 20%), not darken($color, 20)
  • Use a trailing comma after each item in a map, including the last item.

Order

  • Use alphabetical order for declarations.
  • Place @extends and @includes at the top of your declaration list.
  • Place media queries directly after the declaration list.
  • Place pseudo-classes and pseudo-elements second.
  • Place nested elements third.
  • Place nested classes fourth.

Selectors

  • Don't use ID's for style.
  • Avoid over-qualified selectors: h1.page-title, div > .page-title
  • Use meaningful names: $visual-grid-color not $color or $vslgrd-clr.
  • Be consistent about naming conventions for classes. For instance, if a project is using BEM, continue using it, and if it's not, do not introduce it.
  • Use ID and class names that are as short as possible but as long as necessary.
  • Avoid nesting more than 3 selectors deep.
  • Avoid using comma delimited selectors.
  • Avoid nesting within a media query.
  • Don't concatenate selectors using Sass's parent selector (&).

Organization

  • Use a base directory for styling element selectors, global variables, global extends and global mixins.
  • Use HTML structure for ordering of selectors. Don't just put styles at the bottom of the Sass file.
  • Avoid having files longer than 100 lines.