Stylus and MDN

John Karahalis, openjck.com

Stylus and MDN

Stylus logo

Recording

This presentation has been recorded. The recording is in two parts because recording quality was changed halfway through.

Part 1 Part 2

What is Stylus?

  • CSS preprocessor used on MDN (and other Mozilla websites)
  • "Expressive, dynamic, robust"

What does it look like?

Technical requirements

Just the stylus binary!

Using Stylus in MDN

  1. Add a stylesheet to the /media/redesign/stylus directory
  2. Add an entry to MINIFY_BUNDLES (Example)
  3. Add the stylesheet to a template (Example)
  4. To test, run compile-stylesheets --watch on your host

The Good

  • Way better than just CSS (especially for maintenance)
  • Surprisingly powerful language features
  • Responsive team

The Bad

Language features

Syntax choice

Stylus

Compiled CSS

Syntax choice

Stylus

Compiled CSS

Selectors

Stylus

Compiled CSS

Selectors

Stylus

Compiled CSS

Selectors

Stylus

Compiled CSS

Variables

Stylus

Compiled CSS

Variables

Stylus

Compiled CSS

Bare words

Stylus

Compiled CSS

Bare words

Stylus

Compiled CSS

Functions

Stylus

Compiled CSS

Functions

Stylus

Compiled CSS

Functions

Stylus

Compiled CSS

Functions

Stylus

Compiled CSS

Conditionals

Stylus

Compiled CSS

Iteration

Stylus

Compiled CSS

Hashes

Stylus

Compiled CSS

Extension

Stylus

Compiled CSS

Extension

Stylus

Compiled CSS

Extension

Stylus

Compiled CSS

Imports

Stylus

Compiled CSS

Imports

Stylus

Compiled CSS

But wait...

There's more!

Higher-order functions

Stylus

Compiled CSS

Higher-order functions

Stylus

Compiled CSS

Higher-order functions

Stylus

Compiled CSS

One more thing...

Higher-order functions

  • We have lists...
  • We have filter...
  • We have numbers...

Quicksort in Stylus

Stylus

Compiled CSS

Pretty neat!

But if you actually do this...

You're crazy

Don't actually do this

Questions?