JED SCHMIDT

@jedschmidt

AD 1999 - 2000

(IE 5.0 - 5.5)

(bevera.js)

🙇

CSS

Coldwar Simulation Scripting

Client Side Security

Cascading Style Sheets

I 👍 CSS

Declarative

Easy to pick up

Forgiving

Convenient

Well-documented

CSS = .5 * jQuery

$(selector).method()

CSS selectors made jQuery approachable.

jQuery made JavaScript approachable.

there's just two things I dislike about

CSS

Cascading

Style

Sheets

The cascade

Powerful

Powerful

style

markup

CSS only grows.

"Smart people on great teams cede to the fact that they are afraid of their own CSS. You can't just delete things as it's so hard to know if it's absolutely safe to do that. So, they don't, they only add. I've seen a graph charting the size of production CSS over five years show that size grow steadily, despite the company's focus on performance."

- Chris Coyier

Specifi City

li {color: red;}

li.class {color: blue;}

li#id.class {color: red;}

<li style="color: blue;">

li#id.class {color: red !important;}

<li style="color: blue !important;">

!important détente

"The cascade makes it impossible to know what's going to happen unless you actually run the code."

- Pete Hunt

"We're in a situation where we have a sword of Damocles above our head. We have no idea when we're going to get the next issue, but we do know it's going to happen and we can’t do anything about it."

- Christopher Chedeau

how do we manage

cascade complexity?

BEM

OOCSS

SMACSS

SUITCSS

ACSS

KFCSS

.block__element--modifier {}

namespace-component--modifier {}

SASS/SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {

    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS

"The cascading of stylesheets was a solution, but for a set of problems we no longer have."

- Jacob Thornton

The sheet

<ul>

  <li>Cascading</li>

  <li>Style</li>

  <li>Sheets</li>

</ul>

<ul>

  <li bgcolor="#ddd">Cascading</li>

  <li bgcolor="#ddd">Style</li>

  <li bgcolor="#ddd">Sheets</li>

</ul>

<ul>

  <li style="color:#ddd;">Cascading</li>

  <li style="color:#ddd;">Style</li>

  <li style="color:#ddd;">Sheets</li>

</ul>

<style>.my-class {color:#ddd;}</style>

 

<ul>

  <li class="my-class">Cascading</li>

  <li class="my-class">Style</li>

  <li class="my-class">Sheets</li>

</ul>

.my-class {color:#ddd;}

 

<link rel="stylesheet" href="my-style.css">

 

<ul>

  <li class="my-class">Cascading</li>

  <li class="my-class">Style</li>

  <li class="my-class">Sheets</li>

</ul>

ul

li

li

li

my-class

Documents

Applications

Everything is global.

"Selectors are matched against everything in the DOM. You need naming strategies to combat against this and keep things efficient (which are hard to enforce and easy to break)."

- Chris Coyier

<div style="border-color: pink;">
  <style scoped>
    div { background: lightblue; border: 1px solid blue; }
  </style>
  <div></div>
</div>

Tool little, tool late.

"Sufficiently local CSS is indistinguishable from inline styles."

- Schmidt's Third Law

(inverse hipster)

*

PRIOR ART

React: CSS in your JS by @vjeux

Inline Styles are About to Kill CSS by @colinmegill

Inline Styles and When It's Best to Use CSS by @chantastic

Cascading Shit Show by @fat

  • Fewer moving parts
  • Faster installs and builds
  • Access to runtime state/compute
  • Getting yelled at by thirsty randos.
  • Pseudoselectors / media queries
  • Getting yelled at by your friends

https://github.com/FormidableLabs/radium

https://github.com/FormidableLabs/radium/tree/master/docs/comparison

"There's never been a better time to not learn CSS."

- Michael Chan

"Fuck the cascade, write CSS in JavaScript."

- Jacob Thornton

"Come at me, CSS."

- Angus Croll

America Inline!

By Jed Schmidt

America Inline!

These are the slides from my TXJS 2015 presentation: https://2015.texasjavascript.com/#scarystuff

  • 3,976