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

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#id.class {color: red !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>

<ul>

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

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

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

</ul>

.my-class {color:#ddd;}

<ul>

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

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

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

</ul>

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