Code janitor: Alphabetized declarations (and selector order when otherwise arbitrary)

css/skeleton.css

@@ -29,16 +29,18 @@
 /* Grid
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .container {
-  position: relative; 
-  width: 80%; 
-  max-width: 960px; 
   margin: 0 auto;
-  padding: 0; }
+  max-width: 960px;
+  padding: 0;
+  position: relative; 
+  width: 80%; }
+
 .container .column,        
 .container .columns { 
+  box-sizing: border-box;
   float: left; 
-  width: 100%; 
+  width: 100%; }
-  box-sizing: border-box; }
+
 .row { 
   margin-bottom: 2rem; }
 .row .column:first-child,        
@@ -89,7 +91,6 @@
   .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; }
 
   .container .offset-by-one-half.column   { margin-left: 52%; }
-
 }
 
 
@@ -100,20 +101,22 @@ html is set to 62.5% so that all the REM measurements throughout Skeleton
 are based on 10px sizing. So basically 1.5rem = 15px :) */
 html { 
   font-size: 62.5%; } 
+
 body {
-  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  color: #222; 
-  line-height: 1.6;
-  font-weight: 400;
   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  font-weight: 400;
+  line-height: 1.6; }
 
 
 /* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 h1, h2, h3, h4, h5, h6 { 
   font-weight: 300;
-  margin-top: 0;
+  margin-bottom: 2rem;
-  margin-bottom: 2rem; }
+  margin-top: 0; }
+
 h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
 h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
@@ -139,6 +142,7 @@ p {
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a { 
   color: #1EAEDB; }
+
 a:hover { 
   color: #0FA0CE; }
 
@@ -150,54 +154,57 @@ button,
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
-  display: inline-block;
   background-color: transparent;
+  border: 1px solid #bbb;
   border-radius: 4px;
+  box-sizing: border-box;
   color: #555;
-  text-align: center;
+  cursor: pointer;
+  display: inline-block;  
   font-size: 11px;
   font-weight: 600;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid #bbb;
   height: 38px;
   line-height: 38px;
-  padding: 0 30px;
   letter-spacing: .1rem;
+  padding: 0 30px;
+  text-align: center;
+  text-decoration: none;
   text-transform: uppercase;
-  white-space: nowrap;
+  white-space: nowrap; }
-  box-sizing: border-box; }
+
 .button:hover,
 button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
 input[type="button"]:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover,
 .button:focus,
 button:focus,
-input[type="submit"]:focus,
+input[type="button"]:focus
 input[type="reset"]:focus,
-input[type="button"]:focus {
+input[type="submit"]:focus {
   border-color: #888;
   color: #333;
   outline: 0; }
+
 .button.button-primary,
 button.button-primary,
-input[type="submit"].button-primary,
+input[type="button"].button-primary,
 input[type="reset"].button-primary,
-input[type="button"].button-primary {
+input[type="submit"].button-primary {
-  color: #FFF;
+  background-color: #33C3F0;
   border-color: #33C3F0;
-  background-color: #33C3F0; }
+  color: #FFF; }
+
 .button.button-primary:hover,
 button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
 input[type="button"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="submit"].button-primary:hover,
 .button.button-primary:focus,
 button.button-primary:focus,
-input[type="submit"].button-primary:focus,
+input[type="button"].button-primary:focus,
 input[type="reset"].button-primary:focus,
-input[type="button"].button-primary:focus {
+input[type="submit"].button-primary:focus {
   background-color: #1EAEDB;
   border-color: #1EAEDB;
   color: #FFF; }
@@ -206,49 +213,55 @@ input[type="button"].button-primary:focus {
 /* Forms
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 input[type="email"],
+input[type="password"],
 input[type="search"],
 input[type="text"],
-input[type="password"],
+select,
-textarea,
+textarea {
-select {
+  background: #fff;
   border: 1px solid #D1D1D1;
-  height: 36px;
-  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
   border-radius: 4px;
   box-shadow: none;
-  background: #fff; }
+  height: 36px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ }
+
 /* Removes awkard default styles on some inputs */
 input[type="email"],
 input[type="search"],
 input[type="text"],
 textarea {
-  -webkit-appearance: none;
+  appearance: none;
-     -moz-appearance: none;
+  -moz-appearance: none;
-          appearance: none;
+  -webkit-appearance: none; }
-}
+
 textarea {
   min-height: 65px;
-  padding-top: 6px;
+  padding-bottom: 6px;
-  padding-bottom: 6px; }
+  padding-top: 6px; }
+
 input[type="email"]:focus,
+input[type="password"]:focus,
 input[type="search"]:focus,
 input[type="text"]:focus,
-input[type="password"]:focus,
+select:focus,
-textarea:focus,
+textarea:focus {
-select:focus {
   border: 1px solid #33C3F0;
   outline: 0; }
+
 label,
 legend {
   display: block;
   font-weight: 600;
   margin-bottom: .5rem; }
+
 fieldset {
   border-width: 0;
   padding: 0; }
+
 input[type="checkbox"],
 input[type="radio"] {
   display: inline; }
+
 label > .label-body {
   display: inline-block;
   font-weight: normal;
@@ -257,19 +270,23 @@ label > .label-body {
 
 /* Lists
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-ul { 
-  list-style: circle inside; }
 ol { 
   list-style: decimal inside; }
+
+ul { 
+  list-style: circle inside; }
+
 ol, ul {
   margin-top: 0;
   padding-left: 0; }
-ul ul, 
+
-ul ol,
 ol ol,
-ol ul { 
+ol ul,
+ul ul, 
+ul ol { 
   margin: 1.5rem 0 1.5rem 3rem; 
   font-size: 90%; }
+
 li {
   margin-bottom: 1rem; }
 
@@ -277,13 +294,14 @@ li {
 /* Code
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 code {
-  padding: .2rem .5rem;
-  margin: 0 .2rem;
-  font-size: 90%;
   background: #F1F1F1;
   border: 1px solid #E1E1E1;
   border-radius: 4px;
+  font-size: 90%;
+  margin: 0 .2rem;
+  padding: .2rem .5rem;
   white-space: nowrap; }
+
 pre > code {
   display: block;
   padding: 1rem 1.5rem;
@@ -294,12 +312,14 @@ pre > code {
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 th,
 td {
+  border-bottom: 1px solid #E1E1E1;
   padding: 12px 15px;
-  text-align: left;
+  text-align: left; }
-  border-bottom: 1px solid #E1E1E1; }
+
 th:first-child,
 td:first-child {
   padding-left: 0; }
+
 th:last-child,
 td:last-child {
   padding-right: 0; }
@@ -310,37 +330,42 @@ td:last-child {
 button,
 .button {
   margin-bottom: 1rem; }
+
+fieldset,
 input,
-textarea,
 select,
-fieldset {
+textarea
+ {
   margin-bottom: 1.5rem; }
-pre,
+
 blockquote,
-form,
 dl,
 figure,
-table,
+form,
-p,
-ul,
 ol,
-form {
+p,
+pre,
+table,
+ul {
   margin-bottom: 2.5rem; }
+
 p {
   margin-top: 0; }
 
 
-
 /* Utilities
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .u-full-width {
-  width: 100%;
+  box-sizing: border-box;
-  box-sizing: border-box; }
+  width: 100%; }
+
 .u-max-full-width {
-  max-width: 100%;
+  box-sizing: border-box;
-  box-sizing: border-box; }
+  max-width: 100%; }
+
 .u-pull-right {
   float: right; }
+  
 .u-pull-left {
   float: left; }
 
@@ -348,11 +373,11 @@ p {
 /* Misc
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 hr {
-  margin-top: 3rem;
-  margin-bottom: 3.5rem;
-  border-width: 0;
   border-top: 1px solid #E1E1E1;
-}
+  border-width: 0;
+  margin-bottom: 3.5rem;
+  margin-top: 3rem; }
+
 
 /* Clearing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -361,9 +386,9 @@ hr {
 .container:after,
 .row:after,
 .u-cf { 
+  clear: both;
   content: "";
-  display: table;
+  display: table; }
-  clear: both; }
 
 
 /* Media Queries