Comments

All my CSS is written with a pre/post processor today. This enables single-line // comments that don’t exist in the CSS spec.

Comment formats

Use single-line comments // comment instead of multi-line comments /* comment */. This lets you span legitimate comments with code you’d like to temporarily cancel out.

// Single line comments are great.
.hello {
    color: red;
}

/*
// Only use multi-line comments to enclose groups of code.
.goodbye {
    color: blue;
}
*/

Grouping rules

Use comment blocks to define code hierarchy.

/**
* Gravity Department - Responsive frontend site
*
* @author     Brendan Falkowski (http://gravitydept.com)
* @package    enterprise_gravdept
* @copyright  Copyright 2014 Gravity Department
* @license    All rights reserved.
*/


// ==============================================
// Level One
// ==============================================

.alpha {
    color: red;
}


// ----------------------------------------------
// Level Two

.beta {
    color: blue;
}

// Level Three

.charlie {
    color: green;
}

// Element comment
.delta {
    color: black; // Attribute comment
}

// ----------------------------------------------

@include bp (min-width, 600px) {

    .charlie {
        color: aqua;
    }

}

DocBlock

  • Two blank lines after

Level one

  • Separator with equal character (=) to 50th column
  • Capitalize label
  • Three blank lines above

Level two

  • Separator with hyphen character (-) to 50th column
  • Capitalize label
  • Two blank lines above