The Super Mario Bros. Principle

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

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

This can be overwhelming Even with all the tools and
tooling

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

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 { ... }

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> <body> <div
class=“box theme-red”>…</div> </body> <body> <div class=“theme-red”> <div class=“box”>…</div> <div class=“box”>…</div> </div> <div class=“box”>…</div> </body> The whole page Just one element A special area of the site

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

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; }

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

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: …; … }

Enter the apply rule .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>

Don’t avoid the cascade, use it to your advantage in
a tamed way

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

This approach needs some documentation

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

@ddprrt See you at JSConf!

The Super Mario Bros. Principle

The Super Mario Bros. Principle

More Decks by Stefan Baumgartner

Other Decks in Technology

Featured

Transcript