New(ish) Horizons in CSS (PDX Web & Design presentation)
•
0 likes•405 views
Object-oriented CSS, InuitCSS, the history of CSS, plus a potentially ill-fated live coding section. Presented to the PDX Web & Design group in June 2013.
Recommended
More Related Content
Similar to New(ish) Horizons in CSS (PDX Web & Design presentation)
Similar to New(ish) Horizons in CSS (PDX Web & Design presentation) (20)
Recently uploaded
Recently uploaded (20)
New(ish) Horizons in CSS (PDX Web & Design presentation)
- 2. ● Janrain, Inc. ● Not a CSS guru ● Sooo... Me
- 3. <body style="background-color: #fff;"> <p style="font-family: Verdana;"> <b>No abstraction. Nope, none.</b> </p> </body> Once upon a time
- 4. ● Cluttered HTML ● More fine-grained styling means even more clutter ● Redundancy ● No abstraction. Zero. ○ No class- or type-level styling ○ No event ascription ○ No z-index, padding, generic classification ○ Et cetera ● And then... Problems
- 6. ● Biggest win: abstraction ○ style.css (!!!) ○ Maintainability ○ Division of labor ○ Selection mechanisms ● Limitations ○ Still not terribly DRY friendly ○ Minimum possible abstraction layer Solution: CSS(1)
- 7. ● Move toward CSS metadata ○ @charset ○ @import ○ @media ■ all, screen, handheld, projection, print, tv, embossed, tty, braille ○ @page (Opera) ○ @font-face ○ @namespace ● This all culminates in... CSS3
- 8. ● The good ○ Quick and dirty ○ No surprises ○ Separation of concerns ○ Basically just a vast one-direction import system ● The bad ○ Opinionated ○ Bulky ○ Trade velocity for customizability ● The ugly... Bootstrap/Foundation
- 10. ● Variables $blue, $line-height, $main-font ● Nesting #header { div { ul#main { li { p ... ● Mix-ins @mixin banner($size) { font-size: $size; font-family: Verdana; } #header { @include banner(30px); } SASS (plus LESS, Stylus, etc.)
- 11. ● Hate it break it to you, but... There's no such thing...yet ● Hodge podge of capabilities borrowed from/reminiscent of OOP ● DRY ● Booleans (e.g. $use-grids: false) ● BEM (block-element-modifier) ○ Block: independent entity (e.g. header) ○ Element: part of a block that forms a function (e.g. header logo) ○ Modifier: do stuff to an element OOCSS
- 12. ● Default-driven import structure ● Core data types ○ Base ○ Generic ○ Object ● Biggest win: modularity ○ More a template than a framework ○ Build your own damned modules InuitCSS
- 13. DEMO TIME
- 14. ● CSS is not Pythonic ○ Pick a path and stick with it ○ Select a core set of elements and think of them as your building blocks ● Careful with nesting ○ Levels of depth should correspond to importance of what you're working with ● <div class="big bold"> ● <img id="header__logo"> ● /* comment all the things */ Best practices
- 15. Pseudo-classes ○ :local-link(n) ○ :indeterminate ○ :in-range/:out-of-range ○ :read-only/:read-write ○ :column/:nth-column/:nth-last-column ○ E /attribute/ F ○ :any-link ○ :matches(header, footer) h1 ○ :current/:past/:future ○ :required/:optional ○ :nth-match/:nth-last-match ○ [attribute-"value" i] The future: CSS4
- 16. ○ !subject > selector ● In a nutshell... ○ Lots of fun new selectors ○ Not a lot on the "content" side ○ Nothing as exciting as media or calc ● Bold prediction ○ Every company will have a "CSS specialist" CSS4 (cont'd)
- 17. ● Drawing API ○ Goodbye Raphaël, etc. ● Go beyond the mouse ○ Key strokes ■ key:Enter { ... } ○ Gestures ■ div:left-swipe { ... } ● Basically, just colonize jQuery ● Real OOP!!! ○ Arrays, hashes, classes, etc. ■ blocks = [header, main, footer] ○ Methods ■ #main-logo.blink() What should be next?