css-and-sass-coding-standards.markdown

@@ -2,6 +2,8 @@
 
 **REMEMBER** - If in doubt when deciding upon a style use existing, common patterns.
 
+This guide borrows from practices demonstrated in Nicolas Gallagher's [Idiomatic CSS](https://github.com/necolas/idiomatic-css).
+
 
 
 ## 1. Whitespace
@@ -57,7 +59,7 @@ Tip: configure your editor to provide you with shortcuts to output agreed-upon c
 
 For Sass, double-slash comments should be used instead
 
-```js
+```scss
 // ==========================================================================
 // Section comment block
 // ==========================================================================
@@ -98,6 +100,7 @@ For Sass, double-slash comments should be used instead
 * Include a semi-colon at the end of the last declaration in a declaration block.
 * Place the closing brace of a ruleset in the same column as the first character of the ruleset.
 * Separate each ruleset by a blank line.
+* Separate each Section comment block and Sub-section comment block by 4 lines (see practical example section below)
 
 ```css
 .selector-1,
@@ -175,72 +178,62 @@ Long, comma-separated property values - such as collections of gradients or shad
 
 An example of various conventions.
 
-```css
-/* ==========================================================================
-   Grid layout
-   ========================================================================== */
+```scss
+// ==========================================================================
+// Grid layout
+// ========================================================================== */
+//
+// Column layout with horizontal scroll.
+//
+// This creates a single row of full-height, non-wrapping columns that can
+// be browsed horizontally within their parent.
+//
+// Example HTML:
+//
+// <div class="grid">
+//     <div class="cell cell-3"></div>
+//     <div class="cell cell-3"></div>
+//     <div class="cell cell-3"></div>
+// </div>
 
-/**
- * Column layout with horizontal scroll.
- *
- * This creates a single row of full-height, non-wrapping columns that can
- * be browsed horizontally within their parent.
- *
- * Example HTML:
- *
- * <div class="grid">
- *     <div class="cell cell-3"></div>
- *     <div class="cell cell-3"></div>
- *     <div class="cell cell-3"></div>
- * </div>
- */
 
-/**
- * Grid container
- *
- * Must only contain `.cell` children.
- *
- * 1. Remove inter-cell whitespace
- * 2. Prevent inline-block cells wrapping
- */
 
+
+// Grid container
+//
+// Must only contain `.cell` children.
 .grid {
     height: 100%;
-    font-size: 0; /* 1 */
-    white-space: nowrap; /* 2 */
+    font-size: 0;
+    white-space: nowrap;
 }
 
-/**
- * Grid cells
- *
- * No explicit width by default. Extend with `.cell-n` classes.
- *
- * 1. Set the inter-cell spacing
- * 2. Reset white-space inherited from `.grid`
- * 3. Reset font-size inherited from `.grid`
- */
-
+// Grid cells
+//
+// No explicit width by default. Extend with `.cell-n` classes.
 .cell {
     position: relative;
     display: inline-block;
     overflow: hidden;
     box-sizing: border-box;
     height: 100%;
-    padding: 0 10px; /* 1 */
+    padding: 0 10px;
     border: 2px solid #333;
     vertical-align: top;
-    white-space: normal; /* 2 */
-    font-size: 16px; /* 3 */
+    white-space: normal;
+    font-size: 16px;
 }
 
-/* Cell states */
-
+// Cell states
 .cell.is-animating {
     background-color: #fffdec;
 }
 
-/* Cell dimensions
-   ========================================================================== */
+
+
+
+// Cell dimensions
+// ========================================================================== */
 
 .cell-1 { width: 10%; }
 .cell-2 { width: 20%; }
@@ -248,15 +241,15 @@ An example of various conventions.
 .cell-4 { width: 40%; }
 .cell-5 { width: 50%; }
 
-/* Cell modifiers
-   ========================================================================== */
+
+
+
+
+// Cell modifiers
+// ========================================================================== */
 
 .cell--detail,
 .cell--important {
     border-width: 4px;
 }
 ```
-
-
-Based on a work at
-[github.com/necolas/idiomatic-css](https://github.com/necolas/idiomatic-css).
\ No newline at end of file