scottdorman · August 29, 2015 14:04
diff --git a/codestyle.co b/codestyle.co
 codestyle.co examples
diff --git a/css-classes.css b/css-classes.css
 /* Bad example */
 .t { ... }
 .red { ... }
 .header { ... }

 /* Good example */
 .tweet { ... }
 .important { ... }
 .tweet-header { ... }
diff --git a/css-declaration-order.css b/css-declaration-order.css
 .declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
 }
diff --git a/css-import.css b/css-import.css
 <!-- Use link elements -->
 <link rel="stylesheet" href="core.css">

 <!-- Avoid @imports -->
 <style>
  @import url("more.css");
 </style>
diff --git a/css-media-queries.css b/css-media-queries.css
 .element { ... }
 .element-avatar { ... }
 .element-selected { ... }

 @media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
 }
diff --git a/css-nesting.css b/css-nesting.css
 // Without nesting
 .table > thead > tr > th { … }
 .table > thead > tr > td { … }

 // With nesting
 .table > thead > tr {
  > th { … }
  > td { … }
 }
diff --git a/css-organization.css b/css-organization.css
 *
 * Component section heading
 */

 .element { ... }


 /*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

 .element { ... }

 /* Contextual sub-component or modifer */
 .element-heading { ... }
diff --git a/css-prefixed-properties.css b/css-prefixed-properties.css
 /* Prefixed properties */
 .selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
 }
diff --git a/css-selectors.css b/css-selectors.css
 /* Bad example */
 span { ... }
 .page-container #stream .stream-item .tweet .tweet-header .username { ... }
 .avatar { ... }

 /* Good example */
 .avatar { ... }
 .tweet-header .username { ... }
 .tweet .avatar { ... }
diff --git a/css-shorthand.css b/css-shorthand.css
 /* Bad example */
 .element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
 }

 /* Good example */
 .element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
 }
diff --git a/css-single-declaration.css b/css-single-declaration.css
 /* Single declarations on one line */
 .span1 { width: 60px; }
 .span2 { width: 140px; }
 .span3 { width: 220px; }

 /* Multiple declarations, one per line */
 .sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
 }
 .icon           { background-position: 0 0; }
 .icon-home      { background-position: 0 -20px; }
 .icon-account   { background-position: 0 -40px; }
diff --git a/css-syntax.css b/css-syntax.css
 /* Bad CSS */
 .selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
 }

 /* Good CSS */
 .selector,
 .selector-secondary,
 .selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
 }
diff --git a/html-attribute-order.html b/html-attribute-order.html
 <a class="..." id="..." data-modal="toggle" href="#">
  Example link
 </a>

 <input class="form-control" type="text">

 <img src="..." alt="...">
diff --git a/html-boolean-attributes.html b/html-boolean-attributes.html
 <input type="text" disabled>

 <input type="checkbox" value="1" checked>

 <select>
  <option value="1" selected>1</option>
 </select>
diff --git a/html-character-encoding.html b/html-character-encoding.html
 <head>
  <meta charset="UTF-8">
 </head>
diff --git a/html-doctype.html b/html-doctype.html
 <!DOCTYPE html>
 <html>
  <head>
  </head>
 </html>
diff --git a/html-ie-compatibility.html b/html-ie-compatibility.html
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
diff --git a/html-includes.html b/html-includes.html
 <!-- External CSS -->
 <link rel="stylesheet" href="code-guide.css">

 <!-- In-document CSS -->
 <style>
  /* ... */
 </style>

 <!-- JavaScript -->
 <script src="code-guide.js"></script>
diff --git a/html-lang.html b/html-lang.html
 <html lang="en-us">
  <!-- ... -->
 </html>
diff --git a/html-reducing-markup.html b/html-reducing-markup.html
 <!-- Not so great -->
 <span class="avatar">
  <img src="...">
 </span>

 <!-- Better -->
 <img class="avatar" src="...">
diff --git a/html-syntax.html b/html-syntax.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
 </html>
	/* Bad example */
	.t { ... }
	.red { ... }
	.header { ... }

	/* Good example */
	.tweet { ... }
	.important { ... }
	.tweet-header { ... }
	.declaration-order {
	/* Positioning */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;

	/* Box-model */
	display: block;
	float: right;
	width: 100px;
	height: 100px;

	/* Typography */
	font: normal 13px "Helvetica Neue", sans-serif;
	line-height: 1.5;
	color: #333;
	text-align: center;

	/* Visual */
	background-color: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 3px;

	/* Misc */
	opacity: 1;
	}
	<!-- Use link elements -->
	<link rel="stylesheet" href="core.css">

	<!-- Avoid @imports -->
	<style>
	@import url("more.css");
	</style>
	.element { ... }
	.element-avatar { ... }
	.element-selected { ... }

	@media (min-width: 480px) {
	.element { ...}
	.element-avatar { ... }
	.element-selected { ... }
	}
	// Without nesting
	.table > thead > tr > th { … }
	.table > thead > tr > td { … }

	// With nesting
	.table > thead > tr {
	> th { … }
	> td { … }
	}
	*
	* Component section heading
	*/

	.element { ... }


	/*
	* Component section heading
	*
	* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
	*/

	.element { ... }

	/* Contextual sub-component or modifer */
	.element-heading { ... }
	/* Prefixed properties */
	.selector {
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
	box-shadow: 0 1px 2px rgba(0,0,0,.15);
	}
	/* Bad example */
	span { ... }
	.page-container #stream .stream-item .tweet .tweet-header .username { ... }
	.avatar { ... }

	/* Good example */
	.avatar { ... }
	.tweet-header .username { ... }
	.tweet .avatar { ... }
	/* Bad example */
	.element {
	margin: 0 0 10px;
	background: red;
	background: url("image.jpg");
	border-radius: 3px 3px 0 0;
	}

	/* Good example */
	.element {
	margin-bottom: 10px;
	background-color: red;
	background-image: url("image.jpg");
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	}
	/* Single declarations on one line */
	.span1 { width: 60px; }
	.span2 { width: 140px; }
	.span3 { width: 220px; }

	/* Multiple declarations, one per line */
	.sprite {
	display: inline-block;
	width: 16px;
	height: 15px;
	background-image: url(../img/sprite.png);
	}
	.icon { background-position: 0 0; }
	.icon-home { background-position: 0 -20px; }
	.icon-account { background-position: 0 -40px; }