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)

295 views
225 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
295
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×