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
- 4,161