CASCADING

STYLE

SH*TS

A tale of things that suck and how to make them suck less (pun intended).

CURRENT STATUS

True story bro!

Back

in

time

Remember when we used tables for layout?

  • You're too young
  • Somehow it's for the best
  • Forget I even mentioned it

Nope

  • You're too old
  • It's not gonna get better
  • For you I mean, not CSS

YEP

YEAH,

DARK TIMES!

Both sadly and fortunately

We NOW have CSS

And we're kind of stuck with it anyway so...

Don't be that guy

Don't fool around using tables for layout*

* Or I'll kill you Except when dealing with HTML emails

CSS you said dear?

Sparked my interest

You know I'm the kind of man who doesn't use tables for layout!

Dark times NO MORE!

Well, not exactly but nevermind we'll get to it

eventually...

First things first

Use a preprocessor

  • Less (Node.js) Easy to setup but will let you down at some point, trust me...
  • Sass (Ruby) Widely adopted, supa dupa powerful, maybe too much?
  • Stylus (Node.js) More than Less, less than Sass, flexible syntax FTW!
  • Myth (Node.js) For hipsters, some kind of CSS polyfill.
  • ...

Whatever, just pick one... (I mean use Stylus)

I don't want to write that either

:root {
  --purple: #847AD1;
  --large: 10px;
}

a {
  color: var(--purple);
}

pre {
  padding: var(--large);
}

@fingerproof

Cascading Style Sh*ts

By fingerproof

Cascading Style Sh*ts

  • 1,156