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;
}
//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 {
  ...
}
//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;
}

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 {
  ...
}      

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

float: NONE

  • display: inline-block
  • display: table
  • flexbox

vendor prefixes

.shera {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
  • no more!
  • autoprefixer FTW!

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;

@extend Vs. %placeholder

//bad

.button {
   ...
}

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

.button--special {
   @extends .button;

   color: $yellow;
}
//good

%button {
   ...
}

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

.button--special {
   @extends %button;

   color: $yellow;
}

follow ze leader

inspired by Christian Lilley

Questions?

CSS is fun

By hannes

CSS is fun

Pratical tips for writing cleaner CSS.

  • 1,277
Loading comments...

More from hannes