This class is intended for a complete novice to CSS, or those who know enough to get by, but hate everything about it. We will be covering the the basics of CSS (including specificity), using preprocessors, as well as several practical best practices to keep you out of CSS hell.

This is essentially a merging of the "css fundamentals" and "css intermediate" presentations, taking the best bits of both.

• Syntax & Definitions

• The Cascade & Specificity

• Semantic CSS

• CSS Methodologies:

  • ITCSS
  • BEM

• Preprocessors (Stylus)

• Pro Tips

  • Units of Measure
  • Box Model

• Dev Tools

  • show general inspector
    • arrow keys on numbers (command + 100, option + .1, shift + 10)
  • box model inspector
  • toggle on/off hover states
  • show computed inspector
  • show inspecting using sourcemaps
  • Some fancy css
    • show the rems by changing the html font size

• More Reading:

  • Methodologies:
    • SMACSS - How to structure css to make it scale well
    • Namespacing - How to write css classes to make them understandable for developers
    • OOCSS - bringing object-oriented approaches into CSS
    • Mobile-First
  • Useful:
    • Flexbox (& grid, if you don't need ie11!)
    • Lea Verou's Book
  • More Pro Tips:
    • :before & :after pseudo elements
    • calc()
    • currentColor
    • lobotomized owl selector