How I document my CSS before preprocessing.

Document.css

/**---------------------------------------------------------------------------
 * {{Project}} Stylesheet
 *
 * {{Description for the stylesheet from a high-level}}
 *
 * Markup:        {{filename.css}}
 * Project:       {{Project}}
 * Version:       {{Version}} {{Created On}}
 * Description:   {{Project Description}}
 * Website:       {{Project Git Repository}}
 *
 * Author:        {{Author}}
 ---------------------------------------------------------------------------*/
 
 /**
 * TABLE OF CONTENTS
 *
 * SECTION ONE
 * Sub-Section..........Description of the sub-section for quick reference.
 * Sub-Section Two......Description of the sub-section for quick reference.
 *
 * SECTION TWO
 * Sub-Section Three....Description of the sub-section for quick reference.
 * Sub-Section Four.....Description of the sub-section for quick reference.
 *
 * TESTS................Declarations loaded independently for test-case.
 */
 
/*-----------------------------------------
 * SECTION - @Sub-Section
 *---------------------------------------*/

/**
 * Extends 'foo' in styles.css
 * 
 * Due to the fixed navbar the body will need to have
 * a margin of 60px from the top to properly display
 * the top navbar.
 */
.foo {}

/*-----------------------------------------
 * SECTION TWO - @Sub-Section
 *---------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: sans-serif;
}

/**----------------------------------------
 * TESTS
 * --------------------------------------*/

Using the @ in section blocks allows for easy searching when browsing large documents.