Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass & CSS Style Guide
// 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;
}
//
// 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";
// Not recommended
.breadcrumbs{
font-size: rem-calc(13);
}
// Preferred
.breadcrumbs {
font-size: rem-calc(13);
}
// Not recommended
.global-navigation {
background: rgb(56, 128, 45);
color: #55bb00;
}
// Preferred
.global-navigation {
background: #123456;
color: #5b0;
}
// Not recommended
.local_navigation {}
.localnavigation {}
.localNavigation {}
// Preferred
.local-navigation {}
// 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;
}
// Not recommended
color: #E5E5E5;
// Preferred
color: #e5e5e5;
// 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;
}
}
}
// Not recommended
.footer {
background:firebrick;
}
// Preferred
.footer {
background: firebrick;
}
// 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);
}
// Not recommended
.sosume {
color: #ccc;
font-size: rem-calc(11);
}
// Preferred
.sosume {
color: #ccc;
font-size: rem-calc(11);
}
// Not recommended
.header {
background: #eee;_____
}
// Preferred
.header {
background: #eee;
}
.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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.