The Super Mario Bros. Principle

@ddprrt fettblog.eu

manning.com/ baumgartner

http://goo.gl/h7PnfE The long shadow of Super Mario Bros.

Super Mario Bros. was about 40 KB in Size That’s
the same size as today’s Miniﬁed Bootstrap JavaScript* * Bootstrap 4, non-gzipped

Toshihiko Nakago Shigeru Miyamoto

I could insert anything into a level, Nakago’s System would
at least do something with it

Provide something Robust Failsafe Flexible Easy to use

CSS is easy selector { property: value; }

CSS is easy from-that-thing { make-this: look-like-this; and-this: look-something-like-this; }

CSS is easy from-that-thing { make-this: look-like-this; and-this: look-something-like-this; }
This rarely gets complex This is always centre of debates and problems

Methodologies .l-fixed .sidebar { … } .logo { … }

Methodologies .search { … } .search__input--disabled { … } .search__input
{ … }

Methodologies <div class="foo Bd C(#0280ae) Ta(c)"> <p class="Op(0) foo:h>Op(1)”> Lorem
ipsum </p> </div>

INLINE STYLES

CSS Methodologies OOCSS SMACSS BEM Atomic CSS

CSS Methodologies Tools Rules Opinions Edge Cases

All Methodologies Agree That it’s all about the speciﬁcity

Keeping it low Keeping it high BEM Atomic OOCSS SMACSS
Inline Styles

Consensus Avoid speciﬁcity chaos Don’t use the cascade Stop the
inheritance

Sledgehammer methods?

Finding the right selectors can be overwhelming Even with all
the tools and tooling

CSS is easy by design Writing CSS is super hard

CSS is easy by design Writing good CSS is super
hard

Why can’t it be as easy as a { color:
red; }

Think back to miyamoto

Interfaces

Web components <player-character> I’m Mario </player-character> <div class=“player”> <header></header> <div
class=“body”></div> <footer></footer> </div>

Web components document .querySelector( ‘player-character’) .addEventListener( ‘jump’, () => {
// do something }) handleClick: function(e) { this.fire(‘jump’); }

Web components .player { ... } header { ... }
footer { ... } .body { ... }

Enter custom properties

Also known as CSS Variables a { --a-property: red; }

CSS custom properties :root { --main-color: #00b4ff; } .box {
background-color: var(--main-color, blue); } .headline { color: var(--main-color, red); border-color: var(--main-color); }

… follow the cascade :root { --main-color: #00b4ff; } .box
{ background-color: var(--main-color, blue); } .headline { color: var(--main-color, red); border-color: var(--main-color); } .theme-red { --main-color: #ff5205; }

… are inheritable <body class=“theme-red”> <div class=“box”>…</div> </body> The whole
page

page Just one element <body> <div class=“box theme-red”>…</div> </body>

page Just one element A special area of the site <body> <div class=“theme-red”> <div class=“box”>…</div> <div class=“box”>…</div> </div> <div class=“box”>…</div> </body> <body> <div class=“box theme-red”>…</div> </body>

The possibilities! http://codepen.io/ddprrt/pen/KzboRG

The possibilities! http://codepen.io/ddprrt/pen/NNeYOz

The possibilities! http://codepen.io/ddprrt/pen/NNeYOz @keyframes turn-wheel-to-20 { from { transform: rotate(0deg);
} to { transform: rotate(5690deg) } } .number-20 { animation: turn-wheel 10s ease-out forwards; }

The possibilities! http://codepen.io/ddprrt/pen/NNeYOz @keyframes turn-wheel-to-20 { from { transform: rotate(0deg);
} to { transform: rotate(5690deg) } } .number-20 { animation: turn-wheel 10s ease-out forwards; } just for one!

The possibilities! http://codepen.io/ddprrt/pen/NNeYOz

The possibilities! http://codepen.io/ddprrt/pen/NNeYOz @keyframes turn-wheel { from { transform: rotate(0deg);
} to { transform: rotate( calc(15 * 360deg + var(--wheel-deg)) ) } } [class*=number-] { animation: turn-wheel 10s ease-out forwards; } .number-20 { --wheel-deg: 290deg; }

The possibilities! http://codepen.io/ddprrt/pen/NNeYOz @keyframes turn-wheel { from { transform: rotate(0deg);
} to { transform: rotate( calc(15 * 360deg + var(--wheel-deg)) ) } } [class*=number-] { animation: turn-wheel 10s ease-out forwards; } .number-20 { --wheel-deg: 290deg; } turns 1 turn the actual position

Controllable via JavaScript const wheel = document.querySelector(‘roulette-wheel’); wheel.style.setProperty('--wheel-deg', ‘100deg’); wheel.classList.add(‘number-custom');

But it helps with simple stuﬀ as well a {
color: #f00; text-decoration: none; } a:active, a:focus, a:hover { color: #e00; } a:visited: { color: #f00; }

color: #f00; text-decoration: none; } a:active, a:focus, a:hover { color: #e00; } a:visited: { color: #f00; } .btn { color: #fff; background-color: #0f0; } .btn:active, .btn:focus, .btn:hover { background-color: #0e0; } .btn:visited { background-color: #0f0; }

color: var(--txt-color, #f00); text-decoration: none; } a:active, a:focus, a:hover { color: var(--foc-color, #e00); } a:visited: { color: var(--txt-color, #f00); } .btn { --txt-color: #fff; --foc-color: #fff; background-color: #0f0; } .btn:active, .btn:focus, .btn:hover, { background-color: #0e0; }

color: var(--txt-color, #f00); background-color: var(--bg-color, transparent); text-decoration: none; } a:active, a:focus, a:hover { color: var(--foc-color, #e00); background-color: var(--bg-act-color, transparent); } .btn { --txt-color: #fff; --foc-color: #fff; --bg-color: #0f0; --bg-act-color: #0e0; }

That looks like an interface

Compatibility And a damn good polyfill in Polymer

Cascade and inheritance allow us to use custom properties as
a styling interface

But it can be tough .player { display: block }
header { color: var(--player-header-color); width: var(--player-header-width); height: var(--player-header-height); ... } footer { color: var(--player-footer-color); width: var(--player-footer-width); height: var(--player-footer-height); ... } .body { ... } player-character { --player-header-color: …; --player-header-width: …; --player-header-height: …; --player-footer-color: …; --player-footer-width: …; --player-footer-height: …; … }

Well…

Enter level 2

Custom property sets player-character { --player-head: { color: …; width:
…; height: …; } }

Custom property sets player-character { --player-head: { color: …; width:
…; height: …; } } header { @apply(--player-head); }

Without @apply .player { display: block } header { color:
var(--player-header-color); width: var(--player-header-width); height: var(--player-header-height); ... } footer { color: var(--player-footer-color); width: var(--player-footer-width); height: var(--player-footer-height); ... } .body { ... } player-character { --player-header-color: …; --player-header-width: …; --player-header-height: …; --player-footer-color: …; --player-footer-width: …; --player-footer-height: …; … }

With @apply .player { display: block } header { @apply
--player-header; } footer { @apply --player-footer; } .body { ... } player-character { --player-header: { width: ..; height: ..; color: ..; }; --player-footer: { width: ..; height: ..; color: ..; }; }

Think mixins, inheritable, cascading mixins!

Custom Properteception .player { display: block } header { @apply
--player-header; background-color: var(--hat-color); } footer { @apply --player-footer; color: var(--pants-color); } .body { ... } player-character { --player-header: { width: ..; height: ..; --hat-color: ..; }; --player-footer: { width: ..; height: ..; --pants-color: ..; }; }

transparent, resilient interface .mybemmed__header { @apply --player-header; background-color: var(--hat-color); }
.mybemmed__footer { @apply --player-footer; color: var(--pants-color); } player-character { --player-header: { width: ..; height: ..; --hat-color: ..; }; --player-footer: { width: ..; height: ..; --pants-color: ..; }; } <div class=“mybemmed”> <div class=“mybemmed__footer”></div> <div class=“mybemmed__header”></div> </div>

transparent, resilient interface div:nth-of-type(1) { @apply --player-header; background-color: var(--hat-color); }
div:not(:nth-of-type(1)) { @apply --player-footer; color: var(--pants-color); } player-character { --player-header: { width: ..; height: ..; --hat-color: ..; }; --player-footer: { width: ..; height: ..; --pants-color: ..; }; } <div></div> <div></div>

transparent, resilient interface //Access the properties via JavaScript! var styles
= window.getComputedStyle(this); styles.getPropertyValue(‘--hat-color'); player-character { --player-header: { width: ..; height: ..; --hat-color: ..; }; --player-footer: { width: ..; height: ..; --pants-color: ..; }; } <canvas></canvas>

The upsides

Custom properties and the @apply rule transfer selector complexity to
the property level

You design using the same interface regardless of the technology
underneath

Styling of components becomes even more declarative

You don’t avoid the cascade, You use it to your
advantage

Keeping it low Keeping it high BEM Atomic OOCSS SMACSS
Inline Styles

The downsides

This approach needs some documentation

You need JS polyﬁlls for now if you want to
go cross-browser

The apply rule needs some time to land (but it’s
pretty good polyﬁlled in Polymer)

This is also not the one solution for your css
problems

@ddprrt

The Super Mario Bros. Principle - Extended Edition

The Super Mario Bros. Principle - Extended Edition

More Decks by Stefan Baumgartner

Other Decks in Technology

Featured

Transcript