the future of css - devto february, 2016Loading...@darcy

the future of css

devto february, 2016

darcyclarke

developer, designer, speaker,
entrepreneur, mentor & ux advocate

Expectations

html, css, javascript, preprocessors & build tools

what we'll cover

history, preprocessors, postcss, inline-styles,
pros & cons, the future...

Act 1
cascading style sheets

"The Exposition"

history

  • 1996 - CSS Level 1
  • 1998 - CSS Level 2
  • 1999 - CSS Level 3 & Modularization
  • 2011 - CSS Level 2 Revision
  • ? - CSS Level 4

Jacob Thornton

Cascading Shit Show

https://www.youtube.com/watch?v=iniwPUEbPUM

CSS Sucks™

CSS

  • No Variables*
  • No Functions
  • No Dependency Management
  • No encapsulation

[CSS] is a style sheet language used for describing the presentation of a document written in a markup language

css !== programming language

Act 2
Build Tools & Preprocessors

"Rising Action"

Preprocessors

LESS, SASS, SCSS, Stylus, Rework, Clay, Myth, Resign...

Preprocessors

  • Variables
  • Functions
  • extension
  • Dependency Management

Preprocessors suck™

Preprocessors

  • Half-Baked Programming Languages
  • Language & Interpretation Nuances
  • No Standards
  • No Interoperability
  • fragmented communities

Act 2.5
PostCSS

"Conflict"

PostCSS

Builds up an AST & then passes it through plugins which may or may/not make transformations before returning a string of CSS

postcss usage

Precss

a postcss plugin that allows you to use Sass-like markup in your CSS files

precss example

popular packages

  • precss 20,000+ /month
  • postcss-scss 40,000+ /month
  • autoprefixer 300,000+ /month

there has to be a better way

css rule-set

dom

CSS

  • No Variables*
  • No Functions
  • No Dependency Management
  • No encapsulation
  • Not consistent

"always bet on javascript"

~ brendan eich

javascript

  • Variables
  • Functions
  • Interoperability
  • Dependency Management
  • Standardized
  • encapsulation
  • ubiquitous & consistent

javascript object

Act 3
JavaScript Styles

"The Climax"

let's dive in more...

Variables

Functions

modules

modules es6

coffeescript

JavaScript Style Sheets

a thin layer that compiles javascript objects to CSS

  • works on client + server (jss)
  • integrates with postcss (postcss-js)

jss + postcss usage

A note on React & Inline Styles

React & Inline Styles

a JavaScript library that provides a view for data rendered as HTML. Typically rendered using components that contain additional components specified as custom HTML tags

react example

react example output

Act 5
a name for this...

The Resolution

Axel Rauschmayer

"[...] nobody knew what the hell it meant, but now instead of just writing JavaScript the people were writing Isomorphic JavaScript."

http://www.2ality.com/2015/08/isomorphic-javascript.html

"isomorphic", "global" or "universal"?

"And nobody knew what the hell it meant, but now instead of just writing JavaScript the people were writing Isomorphic JavaScript."

~ Axel Rauschmayer

it's all just javascript™

what's the future of css?