SCSS Style Guide

Be consistant with indentation (two-space tab) Be consistant about where spaces before (2) /after(1) go One selector per line, One rule per line List related properties together Have a plan f

SCSS Style Guide

  1. Be consistant with indentation (two-space tab)
  2. Be consistant about where spaces before (2) /after(1) go
  3. One selector per line, One rule per line
  4. List related properties together
  5. Have a plan for class name naming
  6. Don't use ID's #hotdrama
  7. Be Generous With Comments
  8. Variablize All Colors

Formatting Rules

.formatting-rules {
    @extend %extend;
    @include mixins;

    // 'Regular' Styles (Alphabetical)
    //   background-color: $primary;
    //   width: $site-wrapper;

    @media queries {}

    // Nested :pseudo-classes
    //  &:hover {
    //    color: $secondary;
    //  }

    // ::pseudo-elements
    //  &::after {
    //    content: 'hi, ';
    //  }

    .selectors {
      font-size: 2rem;
    }

File Structure

src  
 |_ partials/
 |   |_ base/
 |   |   |_ '_buttons.scss'
 |   |   |_ '_footer.scss'
 |   |   |_ '_header.scss'
 |   |   |_ '_navigation.scss'
 |   |   |_ (...)
 |   |
 |   |_ desktop/
 |   |   |_ '_buttons.scss'
 |   |   |
 |   |   |_ '_index.scss' // @import 'buttons';
 |   |
 |   |_ '_index.scss' // @import 'base/*';
 |
 |_ sections/
 |   |_ home/
 |   |   // If needed, create desktop/_index.scss
 |   |   // and place specific styles there.
 |   |   |_ '_index.scss' // specific and shouldn't be reused.
 |   |
 |   |_ contact/
 |       |_ '_index.scss' // specific and shouldn't be reused.
 |
 |_ variables/
 |   // This files should not generate code
 |   |_ '_animations.scss'
 |   |_ '_colors.scss'
 |   |_ '_fonts.scss'
 |   |
 |   |_ '_index.scss'
 |
 |_ '_main.scss'
 |
 |_ desktop/
     |_ 'index.scss'
     // @import '../main';
     // Include after importing the main sas file the specific
     // desktop partials and section styles.

If you do so, the _main.scss should look something like this:

// ======================================================================
// MAIN TEMPLATE STYLES
// ======================================================================


// Import all Variables
// ----------------------------------------------------------------------
@import 'variables/index';
// ----------------------------------------------------------------------


// Import partials
// ----------------------------------------------------------------------
@import 'partials/index';
// ----------------------------------------------------------------------


// Import Sections
// ----------------------------------------------------------------------
@import 'sections/contact/index';
@import 'sections/home/index';
// ----------------------------------------------------------------------

Finally you'll link the index.scss file into the desktop/ directory.

If you need to separeate the mobile and desktop styles.

If not, just use the _main.scss file as the default stylesheet file and rename it as main.scss.

The desktop/index.scss should look something like this:

// ======================================================================
// DESKTOP STYLES
// ======================================================================


// Import main styles
// ----------------------------------------------------------------------
@import '../main';
// ----------------------------------------------------------------------


// Import desktop partials
// ----------------------------------------------------------------------
@import '../partials/desktop/index';
// ----------------------------------------------------------------------


// Import desktop Sections
// ----------------------------------------------------------------------
@import '../sections/home/desktop/index';
// ----------------------------------------------------------------------