css-comments.md

• use markdown syntax in comments - can be parsed for style guide generation

Doc-block

/**
 *  # Short description
 *  ---
 *
 *  * Long description (optional)
 *
 *  @requires  `styles.css` (optional)
 *  @see 		(external source)[http://developer.yahoo.com/yui/reset/]
 *  @notes 		any other crap
 *
 *  @todo 		Add TODOs
 */
//
//  <ul>      // include markup documentation
//      <li><button class="tertiary">Shop Now</button></li>
//  </ul>
//

Inline

Quasi-selectors

/*ul*/.not-a-list {}

Logic commenting

div {
  width: 100px;	  // width must be less than width of .section
  height: -1px; 	// @bug prevents bug x from happening
}

or

/**
 * Top-level page styling.
 *
 * 1. Demonstrate vertical rhythm when you click the page.
 */
html {
    line-height: 1.5;
    padding: 24px;
    padding: 1.5rem;
    padding-bottom: 0;
    background-color: #fafafa;
    color: #2a2a2a;
}

Indentation - reflect HTML structure

.table-striped{
  tbody tr:nth-of-type(odd){
		background-color:#ffc; 
	}
}

Separate Composable Properties - event driven CSS

html:active,
html:focus {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAYAQMAAADnK87dAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMANrkpWKEAAAANSURBVAiZY2AgCTwAAAEQAOFwuZEGAAAAAElFTkSuQmCC); /* [1] */
}