css style guide topics and css section snippets for sublime text

section.sublime-snippet

<snippet>
	<content><![CDATA[
/* ==========================================================================
   ${1:Section comment block}
   ========================================================================== */
${2}
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>/*=</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.css | source.scss | source.sass | source.less</scope>
</snippet>

style-guide.css

/**
 * Tenants of good style
 */

1. Consistent: Looks like one person wrote the entire application
2. Readable
3. Maintainable 


/* ==========================================================================
   Formatting 
   ========================================================================== */

/* Basic (starting point)
   ========================================================================== */

/** 
 * 	[selector][space]{
 *  [tab][property]:[space][value];
 *  }
 *
 * Why Tabs? http://lea.verou.me/2012/01/why-tabs-are-clearly-superior/
 * Best Reason: You can personalize tabs
 */

.class {
	property: value; /* always have a semi-colon, even on the last one! */
}

/* multiple selectors for a definition */
.class0,
.class1 {
	property: value;
}

/* multiple values */
.class {
	background: 
		url('path/to/image'),
		url('path/to/other/image');
}

/* One Liner (optional)
   ========================================================================== */

/**
 * [selector][space]{[space][property]:[space][value];[space] ...}
 *
 * Good for short definitions & small modifications (states)
 * try not to exceed 4 property/value pairs or ~80 chars
 */

.class { property: value; property: value; property: value; property: value; }

/* Indenting (all or nothing)
   ========================================================================== */

/* Mimics the html element structure */
#id {

}
	#id .class0 {

	}

	#id .class1 {

	}
		#id .class1 .class2 {

		}
/**
 * Benefits:
 *  - easy to read
 *  - easy to understand what it is selecting
 *  
 * Issues:
 *  - tendency to make selectors more verbose than they need to be
 *  - misleading if selector is not in tree (is this selector's elements not a child of that?)
 */


/* ==========================================================================
   Property Order
   ========================================================================== */

/* don't need to be strict about exact order, but like things should be together */

.my-class {
	display: inline-block;					
	position: relative;						
	top: 1px;								
	right: 1px;									
	bottom: 1px;								
	left: 1px;									
	height: 100px;								
	width: 100px;								
	padding: 2px;								
	margin-top: 10px;						

	background: url('/path/to/my/image.png');

	border: 1px solid #000; 				
	border-radius: 3px;						

	font-size: 21px;						
	font-style: normal;						
	color: #fff;							

	overflow: hidden;						
	z-index: 10;
	-webkit-appearance: textfield;
}

.my-class:before {
	content: ""; /* this property should always be first */
	position: relative;
	top: 4px;
	width: 10px;
}

/* ==========================================================================
   Comments
   ========================================================================== */

/**
 * Areas to comment:
 *  - sections
 *  - sub-sections
 *  - states (hover, active, selected, media queries, etc.)
 *  - explanations & examples
 *  - complexities
 */

/* iphone 4 */
@media only screen and (min-width: 638px) {
    
}

/**
 * @example
 * 	<ul class="my-class">
 * 		<li></li>
 * 		...
 * 	</ul>
 */

ul.my-class {
	...
}

ul.my-class li {
	...
}

/* complex selectors should be re-evaluated and commented */
/* if the href attribute value starts with 'http' */
a[href^='http'] {

}

/* commenting on proportional sizes with comments referring to the context and the original size. */
.my-class {
	font-size: 1.66em; /* 33px/20px */	
}

/* ==========================================================================
   Shorthand
   ========================================================================== */

/* know the defaults for each so you are not defining values you don't need to be */

/* shorthand properties: font, border, background */
/* http://www.slideshare.net/maxdesign/line-height */
font: [style] [weight] [font-size]/[line-height] [font-family];
font: italic bold 8px/1.2 Arial, sans-serif;

border: [width] [style] [color];
border: 1px solid #000;

background: [color] [image] [position] [size] [repeat] [attachment] [clip];
background: #000 url('/path/to/image') top left / 100px 200px no-repeat scroll border-box;

/* ==========================================================================
   Color
   ========================================================================== */

try not to use: rgb(0,0,0)
if opacity: rgba(0,0,0, 0.5); /* leading zero (0.0) */
else hex: #000;

/* ==========================================================================
   Quotes
   ========================================================================== */

/* what type of quotation marks to use " " or ' ' */

/* 
what type of quotes to use (if any) for file references, strings, and font-family names 
http://mathiasbynens.be/notes/unquoted-font-family
*/

/* no quotes for system fonts and quotes for embeded fonts (@font-face) */

subsection.sublime-snippet

<snippet>
	<content><![CDATA[
/* ${1:Sub-section comment block}
   ========================================================================== */
${2}
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>/*_</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.css | source.scss | source.sass | source.less</scope>
</snippet>