Authoring 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)


Reading:


Local Courses:


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

IF selector Specificity is Equal,
THE last one wins

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


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 */
}

autoprefixer



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

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

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

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

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

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?


Authoring CSS

By welch canavan

Made with Slides.com

Authoring CSS

  • 2,387

More from welch canavan