Sass & CSS Style Guide

alphabetize_directives.scss

// Not recommended
body {
  padding: 0;
  margin: 0;
  background: #f5f5f5;
  line-height: 1.2;
}

// Preferred
body {
  background: #f5f5f5;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

application.scss

//
// Fonts
//
 
@import "vendor/font-awesome";
 
//
// Settings
//
 
@import "settings";
 
//
// Vendor dependencies
//
 
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; // Or whatever
 
//
// Bases
//
 
@import "bases/elements";
 
//
// Layouts
//
 
@import "layouts";
 
//
// Modules
//
 
@import "modules/headers",
        "modules/global-navs",
        "modules/footers";

//
// Non-modular
//

@import "non-modular/home";

declaration_space.scss

// Not recommended
.breadcrumbs{
  font-size: rem-calc(13);
}

// Preferred
.breadcrumbs {
  font-size: rem-calc(13);
}

hex_colors.scss

// Not recommended
.global-navigation {
  background: rgb(56, 128, 45);
  color: #55bb00;
}

// Preferred
.global-navigation {
  background: #123456;
  color: #5b0;
}

hyphens.scss

// Not recommended
.local_navigation {}
.localnavigation {}
.localNavigation {}

// Preferred
.local-navigation {}

include_extend_directives.scss

// Not recommended
.profile {
  background: #dedede;
  color: #3a3a3a;
  @include border-radius(rem-calc(5));
  @extend .halo;
}

// Preferred
.profile {
  @include border-radius(rem-calc(5));
  @extend .halo;
  background: #dedede;
  color: #3a3a3a;
}

lowercase.scss

// Not recommended
color: #E5E5E5;

// Preferred
color: #e5e5e5;

nesting.scss

// Not recommended
.profile {
  background: #dedede;
  color: #3a3a3a;

  .heading {
    font-size: rem-calc(18);

    a {
      color: #00f;

      &:hover {
        color: lighten(#00f, 10%);

        i {
          line-height: 1;
        }
      }
    }
  }
}

// Preferred
.profile {
  background: #dedede;
  color: #3a3a3a;
}

.profile-heading {
  font-size: rem-calc(18);
}

.profile-link {
  color: #00f;
  
  &:hover {
    color: lighten(#00f, 10%);

    i {
      line-height: 1;
    }
  }
}

property_space.scss

// Not recommended
.footer {
  background:firebrick;
}

// Preferred
.footer {
  background: firebrick;
}

rem_calc.scss

// Not recommended
.sidebar {
  border: 1px solid #ccc;
  margin: 5px 0 10px;
}

// Preferred
.sidebar {
  border: rem-calc(1) solid #ccc;
  margin: rem-calc(5 0 10);
}

soft_tabs.scss

// Not recommended
.sosume {
    color: #ccc;
    font-size: rem-calc(11);
}

// Preferred
.sosume {
  color: #ccc;
  font-size: rem-calc(11);
}

trailing_whitespace.scss

// Not recommended
.header {
  background: #eee;_____
}

// Preferred
.header {
  background: #eee;
}

two_column_layout.scss

.l-two-columns {
  @include grid-row;
}
  
.l-two-columns-content,
.l-two-columns-sidebar {
  @include grid-column(12);
}
  
@media #{$large-up} {
  .l-two-columns-content {
    @include grid-column(9);
  }
  
  .l-two-columns-sidebar {
    @include grid-column(3);
  }
}