CSS Syntax

• Use soft tabs with two spaces. Spaces are the only way to guarantee code renders the same in any environment.

    // Bad SCSS
    header {
        padding: 0 15px;
        background: #fff;
  
            nav {
                display: flex;
            }
    }
  
    // Good SCSS
    header {
      padding: 0 15px;
      background: #fff;
  
        nav {
          display: flex;
        }
  
    }
  

• Include one space before the opening brace of declaration blocks for legibility.

    // Bad SCSS
    header{
      padding: 0 15px;
      background: #fff;
  
        nav{
          display: flex;
        }
  
    }
  
    // Good SCSS
    header {
      padding: 0 15px;
      background: #fff;
  
        nav {
          display: flex;
        }
  
    }
  

• Place closing braces of declaration blocks on a new line.

    // Bad SCSS
    header{
      padding: 0 15px;
      background: #fff;
  
        nav{
          display: flex;}}
  
    // Good SCSS
    header {
      padding: 0 15px;
      background: #fff;
  
        nav {
          display: flex;
        }
  
    }
  

• Include one space after : for each declaration.

    // Bad SCSS
    header {
      padding:0 15px;
      background:#fff;
  
        nav {
          display:    flex;
        }
  
    }
  
    // Good SCSS
    header {
      padding: 0 15px;
      background: #fff;
  
        nav {
          display: flex;
        }
  
    }
  

• Each declaration should appear on its own line for more accurate error reporting. (See Linter setup for more on error reporting.)

    // Bad SCSS
    header {
      padding: 0 15px; background: #fff;
    }
  
    // Good SCSS
    header {
      padding: 0 15px;
      background: #fff;
    }
  

• End all declarations with a semi-colon. The last declaration’s is optional, but your code is more error prone without it.

    // Bad SCSS
    header {
      padding: 0 15px;
      background: #fff
  
        nav {
          display: flex
        }
  
    }
  
    // Good SCSS
    header {
      padding: 0 15px;
      background: #fff;
  
        nav {
          display: flex;
        }
  
    }
  

• Comma-separated property values should include a space after each comma (e.g. box-shadow).

    // Bad SCSS
    header {
      background-color: rgba(0,0,0,.3);
    }
  
    // Good SCSS
    header {
      background-color: rgba(0, 0, 0, .3);
    }
  

• Don’t prefix property values or color parameters with a leading zero (e.g. .5 instead of 0.5 and -.5px instead of -0.5px).

    // Bad SCSS
    header {
      margin-top: 0.5;
    }
  
    // Good SCSS
    header {
      margin-top: .5;
    }
  

• Lowercase all hex values, e.g. #fff instead of #FFF.

    // Bad SCSS
    header {
      background: #FFF;
    }
  
    // Good SCSS
    header {
      background: #fff;
    }
  

• Use shorthand hex values where available, e.g. #fff instead of #ffffff.

    // Bad SCSS
    header {
      background: #ffffff;
    }
  
    // Good SCSS
    header {
      background: #fff;
    }
  

• Quote attribute values in selectors, e.g. input[type=’text’]. They’re optional in most cases, but it’s good practice for consistency.

    // Bad SCSS
    form {
      input[type=text];
    }
  
    // Good SCSS
    form {
      input[type='text'];
    }
  

• Avoid specifying units for zero values, e.g. margin: 0; instead of margin: 0px;.

    // Bad SCSS
    header {
      margin: 0px;
    }
  
    // Good SCSS
    header {
      margin: 0;
    }