CSS/SASS Style Guide

overview.md

#Coding Standards

###Markup

###Javascript

Conde JS style guide, @sandro-pasquali is leading this effort.
https://github.com/CondeNast/js_styleguidelines.

Name all functions on nodejs for better stack trace. //TODO add example

TODO add this in a hinting tool in workflow.

https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

• Use '"use strict"'

####Node TODO This is a good reference https://github.com/felixge/node-style-guide

###CSS/SASS

• Be consistent with indentation
• Be consistent about where spaces before/after colons/braces go
• One selector per line, One rule per line
• List related properties together
• Don't use ID's in specificity

##SASS Style Guide

• List @extend(s) First
• List "Regular" Styles Next
• List @include(s) Next

Example:

.weather {
  @extends %module; 
  background: #000;
  @include transition(all 0.3s ease-out);
  ...
}

• Nested Selectors Last
• All Vendor Prefixes Use @mixins (except very specific edge cases)
• Maximum Nesting: Three Levels Deep (Any longer and something is going wrong)
• For Readability No Nesting Past 50 Lines
• Global and Section Files Should have no styles in them
• Vender Authored

/* Vendor Dependencies */ @import "compass";

/* Authored Dependencies */ @import "global/colors"; @import "global/mixins";

/* Patterns */ @import "global/tabs"; @import "global/modals";

/* Sections */ @import "global/header"; @import "global/footer";

##Shame File
Keep hacks in a single location