CSS is fun

...till it's not

order

//bad

.alfred {
  min-width: 80px;
  color: red;
  float: left;
  width: 80px;
  min-height: 220px;
  height: 220px;
}


.robin {
  padding-left: 5px;
  width: 168px;
  margin: 0;
  float: left;
  color: $gray-nav;
  font-size: 0.9em;
  padding-right: 30px;
}

.batman {
  font-family: $primary-font;
  text-transform: uppercase;
  font-size: 1.1em;
  margin-bottom: 5px;
  color: black;
  height: 50px;
}

http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

//example

diplay-properties
   float
   display
   overflow
   etc
 
size-properties
   width
   height
   padding
   margin
   etc

colors
   background
   border
   color
   etc

fonts
   font-size
   font-weight
   text-transform
   etc

css3 stuff
   gradients
   box-shdow
   gradients
   etc

others

position
   z-index
   position
    top
    left

stop using IDs

//bad

#captainplanet {
  ...
}

not reusable
specificity high

//good

.captainplanet {
  ...
}

http://cssguidelin.es/#ids-in-css

//example

#header a {
  color: green;
}

nav a {
  color: red;
}

!important my ass

//bad

a {
  color: red !important;
}

.header a {
  color: blue !important;
}

.header .widget--discount a {
  color: red !important;
}

unmaintainable
specificity high

//weird, but better

a {
  color: red;
}

.header a {
  color: blue;
}

.header .widget--discount a {
  color: red;
}

http://cssguidelin.es/#important

element selectors

//bad

.gadgets ul {
  ...
}

label {
  ...
}

specificity high
elements change (flexibility)

//good

.listing-gadgets {
  ...
}

.label {
  ...
}

avoid nesting (Sass)

//bad

.cave {
  ...

  .batcar {
    ...
    
    .robin {
      ...
    }
  }
}

specificity high

//good

.cave {
  ...
}

.batcar {
  ...
}

.robin {
  ...
}

http://cssguidelin.es/#nesting

naming things

//bad

.white-block {
  background-color: white;
}

.margin-10 {
  margin: 10px;
}

think in modules
make things re-usable

//good

.block-thing {
  ...
}

.block-thing--space {
  margin: 10px;
}

http://css-tricks.com/semantic-class-names/#comment-102571 (this comment and the full article)

//because

.white-block {
  background-color: yellow;
}

.margin-10 {
  margin: 15px;
}

BEM

//basics

.block {}

.block__element {}

.block--modifier {}


//example

.list-orders {}

.list-orders__item {}

.list-orders__item--discount {}

specificity low
clear naming pattern
reusable
no more nesting

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

float: NONE

display: inline-block
display: table
flexbox

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

vendor prefixes

.shera {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

no more!
autoprefixer FTW!

http://css-tricks.com/autoprefixer/

Sass variables

//bad

$primary: #000;
$secondary: #fff;

$main-color: #ccc;
$secondary-color: #eee;

$margin-size-1: 10px;
$margin-size-2: 20px;
$margin-size-3: 30px;
$margin-size-4: 40px;

don't overcomplicate

//good

$black: #000;
$white: #fff;

$brand-primary: $black;
$brand-secondary: $white;

$default-spacing: 20px;
$default-radius: 5px;

http://davidwalsh.name/sass-color-variables-dont-suck

@extend Vs. %placeholder

//bad

.button {
   ...
}

.button--default {
   @extends .button;
   
   color: $grey;
}

.button--special {
   @extends .button;

   color: $yellow;
}

reduce CSS
sassmeister.com

//good

%button {
   ...
}

.button--default {
   @extends %button;
   
   color: $grey;
}

.button--special {
   @extends %button;

   color: $yellow;
}

http://thesassway.com/intermediate/understanding-placeholder-selectors