Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
New(ish)horizons inCSSLuc PerkinsJanrain, Inc.
● Janrain, Inc.● Not a CSS guru● Sooo...Me
<body style="background-color: #fff;"><p style="font-family: Verdana;"><b>No abstraction. Nope, none.</b></p></body>Once u...
● Cluttered HTML● More fine-grained styling means evenmore clutter● Redundancy● No abstraction. Zero.○ No class- or type-l...
● Biggest win: abstraction○ style.css (!!!)○ Maintainability○ Division of labor○ Selection mechanisms● Limitations○ Still ...
● Move toward CSS metadata○ @charset○ @import○ @media■ all, screen, handheld, projection,print, tv, embossed, tty, braille...
● The good○ Quick and dirty○ No surprises○ Separation of concerns○ Basically just a vast one-direction import system● The ...
● Variables$blue, $line-height, $main-font● Nesting#header { div { ul#main { li { p ...● Mix-ins@mixin banner($size) {font...
● Hate it break it to you, but...Theres no such thing...yet● Hodge podge of capabilities borrowedfrom/reminiscent of OOP● ...
● Default-driven import structure● Core data types○ Base○ Generic○ Object● Biggest win: modularity○ More a template than a...
DEMOTIME
● CSS is not Pythonic○ Pick a path and stick with it○ Select a core set of elements and think of themas your building bloc...
Pseudo-classes○ :local-link(n)○ :indeterminate○ :in-range/:out-of-range○ :read-only/:read-write○ :column/:nth-column/:nth-...
○ !subject > selector● In a nutshell...○ Lots of fun new selectors○ Not a lot on the "content" side○ Nothing as exciting a...
● Drawing API○ Goodbye Raphaël, etc.● Go beyond the mouse○ Key strokes■ key:Enter { ... }○ Gestures■ div:left-swipe { ... ...
Contact@lucperkinsluc@janrain.com
New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)
Upcoming SlideShare
Loading in …5
×

New(ish) Horizons in CSS (PDX Web & Design presentation)

369 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

New(ish) Horizons in CSS (PDX Web & Design presentation)

  1. 1. New(ish)horizons inCSSLuc PerkinsJanrain, Inc.
  2. 2. ● Janrain, Inc.● Not a CSS guru● Sooo...Me
  3. 3. <body style="background-color: #fff;"><p style="font-family: Verdana;"><b>No abstraction. Nope, none.</b></p></body>Once upon a time
  4. 4. ● Cluttered HTML● More fine-grained styling means evenmore 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
  5. 5. ● Biggest win: abstraction○ style.css (!!!)○ Maintainability○ Division of labor○ Selection mechanisms● Limitations○ Still not terribly DRY friendly○ Minimum possible abstraction layerSolution: CSS(1)
  6. 6. ● 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
  7. 7. ● 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
  8. 8. ● 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.)
  9. 9. ● Hate it break it to you, but...Theres no such thing...yet● Hodge podge of capabilities borrowedfrom/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 elementOOCSS
  10. 10. ● Default-driven import structure● Core data types○ Base○ Generic○ Object● Biggest win: modularity○ More a template than a framework○ Build your own damned modulesInuitCSS
  11. 11. DEMOTIME
  12. 12. ● CSS is not Pythonic○ Pick a path and stick with it○ Select a core set of elements and think of themas your building blocks● Careful with nesting○ Levels of depth should correspond to importanceof what youre working with● <div class="big bold">● <img id="header__logo">● /* comment all the things */Best practices
  13. 13. 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
  14. 14. ○ !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 (contd)
  15. 15. ● 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?
  16. 16. Contact@lucperkinsluc@janrain.com

×