Authoring CSS

xiw.cx/authr-css

Good CSS IS...

...DRY (Don't Repeat Yourself)

...object oriented

...consistent

...hard!

easy to write,
difficult to write well

Educational resources

Online Tutorials:

Codecademy (free)

Don't Fear the Internet (free)

Codeschool

Reading:

CSS Tricks

CSS3 For Designers

Local Courses:

General Assembly

Anatomy of CSS

Anatomy of css

h1 {
  color: red;
}

selector {
  property: value;
}

Other things you might see in a .css FILE

@import (...} /* import external css */
@media {...} /* media queries */
@font-face {...} /* web font declaration */
@keyframes {...} /* animation */

Inheritance & specificity

CSS Inheritance

body {
  font-family: Helvetica, Arial, sans-serif;
}

<html>  <head>...<head>  <body>    <h1>...</h1>    <p>...</p>  </body></html>

CSS SPecificity

Selector	Example	Specificity
element	<div>	0-0-1
class	.class-a	0-1-0
id	#id-b	1-0-0

( cssspecificity.com )

IF selector Specificity is Equal,
THE last one wins

( codepen.io/xiwcx/pen/qpJHi )

If selector specificity is greater,
It doesn't matter the order

( codepen.io/xiwcx/pen/ehcqr )

VENDOR Prefixes

vendor prefix example

.box_scale {
  -webkit-transform: scale(0.8);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: scale(0.8);  /* IE 9 */
          transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera */
}

( css3please.com )

autoprefixer

lets you write "future" CSS and takes care of the prefixing for you

available as a free command line utility

and in the OS X GUI Codekit

take it for a spin on Codepen

CSS MethoDologies

OBJECT ORIENTED CSS (OOCSS)

every style block should do one thing and do it well

( smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss )

not as good way to write styles

header > nav > ul > li > a {
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  line-height: .8;
  margin-left: .5em;
  margin-right: .5em;
  padding-left: .25em;
  padding-right: .25em;
}

better way to write styles

.navitem {
  display: inline-block;
  margin-left: .5em;
  margin-right: .5em;
  padding-left: .25em;
  padding-right: .25em;
}

.button {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  line-height: .8;
}

OOCSS Advantages

it's DRY!

it avoids specificity wards

it's portable/scalable/modular

SCalable Modular Architecture for css

Builds on the concept of OOCSS by adding categories

base rules
layout rules
module rules
state rules
theme rules

( smacss.com )

BEM

.block__element--modifier { ... }

( bem.info/method/definitions )

MEDIA QUERIES

Media QuerIES

.title {
  color: dimgray;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 2em;
}

@media screen and (min-width: 20em) {
  .title {
    font-size: 4em;
  }
}

THINgs you can specify with media queries

height
orientation
resolution
width
and more...

( dochub.io/#css/css media queries )

WRONG WAY TO WRITE MEDIA QUERIES

@media screen and (max-width: 19.99em)
  .title {
    color: dimgray;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2em;
  }
}

@media screen and (min-witdh: 20em) and (max-width: 39.99em)
  .title {
    color: dimgray;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 4em;
  }
}

@media screen and (min-witdh: 40em) and (max-width: 60em)
  .title {
    color: dimgray;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 6em;
  }
}

RIGHT way to write media queries

.title {
  color: dimgray;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 2em;
}

@media screen and (min-width: 20em) {
  .title {
    font-size: 4em;
  }
}

@media screen and (min-width: 40em) {
  .title {
    font-size: 6em;
  }
}

GENERAL TIPS

Just use Classes

there's no real advantage to styling with IDs

( css-tricks.com/a-line-in-the-sand )

avoid Shorthand properties

.thing {
  margin: 0 1em;
}

only write the properties you need

.thing {
  margin-left: 1em;
  margin-right: 1em;
}

ALphabetize your Property names

other methods for grouping properties can feel arbitrary,

this is a guarantee

.subheading {
  color: red;
  font-size: 2em;
  font-weight: 100;
}

NEVER use !Important

it's a method of absolute last resort

(e.g. overriding the code of a third party vendor that you can't touch)

QUESTIONS?