Learn CSS the Hard Way - Example-driven talk that focuses in-depth on CSS2 fundamentals and best practices for real-world scenarios. Examples are interactive. There are also resources (below) for further learning. Everything is online for future reference and experimentation: http://codepen.io/collection/XOLJBj

Learn CSS the Hard Way.md

Introduction ^(5min)

• (Setup: http://codepen.io/hlfcoding/pen/vEzpVd, stopwatch, printout of this, all pens loaded.)
• Reason for this talk: better 'general knowledge of' (will be less lost) / 'fundamental knowledge how to' (will do it right).
• Format of the talk. Provide general outline. Q&A time after each point.
• History and personal history with CSS.
  • How complexity has been introduced in places and resolved in others.

Topics

Adding classes to elements ^(10min)

First topic because grammar establishes foundational conventions. Good warmup.

Show and discuss pros, cons for different markup techniques: http://codepen.io/hlfcoding/pen/dPeBjW

• Markup in the un-semantic style (first figure).
• Markup in the semantic style (second figure).
• Markup in a real example (third figure).
• Review figure captions.
• Mention OOCSS.

Intro to positioning and layout properties ^(25min)

• The legacy of the document (object) model.
• These properties (their CSS2 values) have no usage caveats after IE9.

The display property: http://codepen.io/hlfcoding/pen/myBGvq

• Distinguish block, inline-block, inline. Emphasize this importance.
• Mention vertical-align, but that it's only reliable / easy to understand for one-liners.
• Also touch on the table* properties.
• Note all examples are positioned statically.

The position property: http://codepen.io/hlfcoding/pen/pvZeNM

• Explain static. Emphasize its use case.
• Explain relative, expanding on static.
• Explain absolute, expanding on relative. Discuss common use cases.
• Explain fixed.
• Explain z-index.

Floating (float, clear) properties:

• Gloss over the basics, that floats, along with 'clearfix', are used for columns. There's nothing new or obscure about CSS2 grids.
  • http://tympanus.net/codrops/css_reference/float
  • http://tympanus.net/codrops/css_reference/clear
  • Effective for boxes that snap to an edge and then next to each other while still taking up layout space in the parent.
• Discuss pitfalls with the toolbar use case. Discuss the complexity around floats.
  • Margins don't collapse, unlike with normal document flow.
  • Floated elements automatically become display: block elements if they are inline.
  • Floated elements remain in the document flow and affect the flow of other elements around it. http://codepen.io/hlfcoding/pen/VYBWww

Mention overflow.

Animations and the works ^(5min)

Use a personal example (provide context): http://codepen.io/hlfcoding/pen/rhnkD

• Go over animation through use of transition, animation, @keyframe, transform.
  • Note for performance we're transforming using translate instead of transitioning top and left.
• Mention use of pseudo-elements for rendering cross-hairs.
• Note the use of other Sass language features like mixins, maps, loops, and color functions.

Sass gotchas and conventions ^(5min)

But don't forget the small details of the internals.

• Revisit the examples and note the conventions.
• Note variable scoping with old Sass versions.
• Note lack of precendence when using @extend. http://codepen.io/hlfcoding/pen/qEyPGw

Adapting to the future ^(10min)

http://codepen.io/hlfcoding/pen/JoBOyP

• Integrating feature detection is easier these days, most CSS features don't need fallbacks.
  • The exception is with layouts and gestures. For example, use flex-box, but fall back to floats or tables.
• Simple responsive layout techniques:
  • A single mobile breakpoint (two @media queries) and setting min/max-width can go a long way, especially since @media is complex.
  • Support new media incrementally; keep vigilant and test.
  • Note the visual design decisions made to keep the 'spirit' of the UI for smaller viewports.
  • Note sometimes best results mean completely different layouts and additional elements and scripting.

Conclusion ^{(5min, 5min Q&A)}

• Reason for this talk.
• Imperfect model.
• Value of experimentation.
• Brief overview of resources.

Resources.md

Resources

Overviews

• https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css -- Start here if you're new to CSS. (hours)
• http://blog.froont.com/positioning-in-web-design/ -- Great intro to the fundamentals of the position property. (5min)
• http://learnlayout.com/ -- Good general overview of basic layout recipes, from older to newer approaches. (10-20min)
• http://wtfhtmlcss.com/#buttons-firefox -- Advanced list of common CSS caveats. (10-20min)
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context -- Quick look at block formatting contexts. (5-10min)

Reference

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference -- De facto CSS reference. (∞)
• http://tympanus.net/codrops/css_reference -- Much more accessible version of the MDN reference. (∞)

Topical articles

• http://css-tricks.com/strategies-keeping-css-specificity-low -- Advanced tips. (10-20min)
• http://css-tricks.com/complete-guide-table-element -- Comprehensive guide to tables and CSS tables better than any official w3c spec I can find. (30min-1hr)
• http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css -- Centering stuff is popular, and hard. (20-30min)
• http://nicolasgallagher.com/about-html-semantics-front-end-architecture -- Interesting counter-argument to bloating the class attribute. (10-20min)
• http://www.sitepoint.com/understanding-block-formatting-contexts-in-css -- Contains a good explanation about why overflow: hidden can work as a 'clearfix'. (10-20min)

Technical Specs

• http://www.w3.org/TR/CSS21/visuren.html -- The detailed spec on CSS2 positioning and layout. (1hr)
• http://www.w3.org/TR/html5/tabular-data.html -- Detailed spec for HTML5 update to tables. (1 hr)

Other

• http://oocss.org/grids_docs.html -- Where the concept of 'Object-Oriented CSS' came about. (10-20min, though hours if you're going to be arguing with someone about whether presentational class lists belong in the HTML attribute or as Sass @extend statements.)
• http://nicolasgallagher.com/micro-clearfix-hack -- Explanation of the inner workings of the latest version of 'clearfix'. (10min)
• http://caniuse.com/#compare=ie+9,ie+10&compare_cats=CSS -- The CSS we can use in real-world scenarios largely depends on which version of IE we need to support. Working with next-generation / 'evergreen' browsers will open up these new CSS properties, two of which seem especially important:
  • http://www.w3.org/TR/css3-flexbox, http://tympanus.net/codrops/css_reference/flexbox
  • http://www.w3.org/TR/css3-grid-layout
  • Note that transition and transform are more secondary, so using them with IE9 is even ok.