the future is modular, jonathan snook
TRANSCRIPT
The Future is Modular
2003 CSS Takes Off
Wired Redesign
Blog Design
Blog Designs
#header h1, #header h2 { font-size:13px; font-weigh… }#header h1 { color: #680; float:right; padding-b…}#header h2 { float:left; padding:18px 20px; posi…}#header h2 img { position:absolute; left:0; top:0; }#header h2 a { text-decoration:none; color:#333; }
#main h2 {text-transform:uppercase; font-weight:…}#main h2 a {text-decoration:none; color:#444;}#main h2 a:hover {color:#680;}
#main .article.inside h1 { text-transform:uppercase;…}#comments .comment .meta .authorname { text-transfo… }#comments .comment .meta .commentnumber a { float: … }
Blog Designs
#header h1, #header h2 { font-size:13px; font-weigh… }#header h1 { color: #680; float:right; padding-b…}#header h2 { float:left; padding:18px 20px; posi…}#header h2 img { position:absolute; left:0; top:0; }#header h2 a { text-decoration:none; color:#333; }
#main h2 {text-transform:uppercase; font-weight:…}#main h2 a {text-decoration:none; color:#444;}#main h2 a:hover {color:#680;}
#main .article.inside h1 { text-transform:uppercase;…}#comments .comment .meta .authorname { text-transfo… }#comments .comment .meta .commentnumber a { float: … }
Blog Designs
#header h1, #header h2 { font-size:13px; font-weigh… }#header h1 { color: #680; float:right; padding-b…}#header h2 { float:left; padding:18px 20px; posi…}#header h2 img { position:absolute; left:0; top:0; }#header h2 a { text-decoration:none; color:#333; }
#main h2 {text-transform:uppercase; font-weight:…}#main h2 a {text-decoration:none; color:#444;}#main h2 a:hover {color:#680;}
#main .article.inside h1 { text-transform:uppercase;…}#comments .comment .meta .authorname { text-transfo… }#comments .comment .meta .commentnumber a { float: … }
SMACSS
Scalable and Modular Architecture for CSS
• Describes how to approach site design and development
• No GitHub repo, not a library, not a framework, no tools
• Techniques can be applied to static CSS, Sass, React, Web Components, etc.
What does it mean to be modular?
A module is “each of a set of standardized parts or independent units that can be used to construct a more complex structure.”–Dictionary
What hurdles are there to being truly independent?
• Inheritance
• Cascade
• Browser Default Styling
• Putting modules/components together
Inheritance
• Typographye.g. color, font-size, font-family
• List Stylese.g. list-style
• Table Styles e.g. border-collapse
Sorry, React. Inline styles won’t save you from inheritance.
• all: initial
Cascade
The cascade is how the browser decides what properties to apply when you have multiple rules declared on the same element.
• Don’t write multiple rules for the same element
• Inline styles
• Create a structured layering system to prevent conflicts
Browser Defaults
<button class="button">
.button { border:1px solid purple; padding: 5px 10px; color: pink; }
<a href="/" class="button">
text-decoration: none;
• all: initial
• Predictable HTMLi.e. templates
Putting Modules Together
Send
Cancel Send
.button + .button { margin-left: 10px; }
Cancel Send
SendEmail
.button + .button,
.input + .button { margin-left: 10px; }
* + * { margin-left: 10px; }
Send SubscribeEmail
http://snk.ms/26
• Separate layout from module
• Micro layout classes
<span class=“layout-inline”> <input><button>Send</button></span>
<span class=“layout-inline”> <button>Subscribe</button></span>
<input><button>Send</button>
<button class=“ML-S”>Subscribe</button>
BONUS PROBLEM!Media Queries
If Module A in Module B in Layout C Then I’m screwed.
If Module A has roomdo this.
Element Queries
Element Queries
Oh, right. SMACSS.
Design has a cost.
Every piece of design ends up in code.
• Categorize
• Naming Convention
Base
Layout
Module
State
Theme
• .btn • .btn--variation • .btn__component
• .btn • &--variation • &__component
• button.css • .variation • .component
SMACSS-yBEM
Sass
CSS Modu
les/Rea
ct
• .btn • .btn-variation • .btn--component
HTML
CSS
JavaScript
HTML
CSS
JavaScript
HTML
CSS
JavaScript
React and Inline Styles
React.render( <XUIButton type={type}> My Button! </XUIButton> );
var XUIButton = React.createClass({ render: function() { return ( <button className="{this.props.type}"> {this.props.children} </button> ); }});
var myStyle = { color: '#FFF', backgroundColor: '#330000'}
var XUIButton = React.createClass({ render: function() { return ( <button style="{myStyle}"> {this.props.children} </button> ); }});
HTML
CSS
JavaScript
HTML
CSS
JavaScript
HTML
CSS
JavaScript
The Future: Web Components
• Templates
• Shadow DOM
• Custom Elements
• HTML Imports
var p = document.createElement(‘p');
p.createShadowRoot();
p.shadowRoot.innerHTML = 'HTML Contents';
document.body.appendChild(p);
• The Cascade no longer applies
• Inheritance still applies (unless you use all:initial)
HTML
CSS
JavaScript
HTML
CSS
JavaScript
component.html <link rel="import" href="component.html">
<template><figure> <content select="img"></content></figure><div> <content></content></div></template>
<custom-element> <img src="…"></custom-element>
// Creates a MediaObjectElement class // that extends HTMLElement.class MediaObjectElement extends HTMLElement { createdCallback() { var shadowRoot = this.createShadowRoot(); shadowRoot.innerHTML = 'Shadow DOM contents...'; }}
// Registers the `<custom-element>` element for use.document.registerElement('custom-element', MediaObjectElement);
• Likely a year before all browsers support everything.
• JavaScript Dependent
• Phillip Walton’s Talk on Modular CSS with Web Components http://snk.ms/27
• Think about standardized and modular design.
• Frameworks like React can help.
• Web Components are coming. (So is winter.)
Thank you.http://snook.ca/@snookca