Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future is In Pieces

snookca
December 05, 2015

The Future is In Pieces

My talk from CSSDay.io

snookca

December 05, 2015
Tweet

More Decks by snookca

Other Decks in Programming

Transcript

  1. 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: … }
  2. 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: … }
  3. 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: … }
  4. • 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.
  5. A module is “each of a set of standardized parts

    or independent units that can be used to construct a more complex structure.” –Dictionary
  6. • Typography
 e.g. color, font-size, font-family
 • List Styles
 e.g.

    list-style
 • Table Styles 
 e.g. border-collapse
  7. The cascade is how the browser decides what properties to

    apply when you have multiple rules declared on the same element.
  8. a:link { color: blue; } a:hover { color: cornflowerblue; }

    .sidebar a:link { color: grey; } .sidebar a:hover { color: crimson; } .nav a:link { color: cadetblue; } .nav a:hover { color: darkblue; }
  9. • Don’t write multiple rules for the same element
 •

    Inline styles
 • Create a structured layering system to prevent conflicts
  10. <button class="button"> .button {
 border:1px solid purple;
 padding: 5px 10px;


    color: pink;
 } <a href="/" class="button"> text-decoration: none;
  11. .button + .button,
 .input + .button { 
 margin-left: 10px;

    
 } * + * { 
 margin-left: 10px; 
 }
  12. If Module A 
 in Module B 
 in Layout

    C 
 Then I’m screwed.
  13. • .btn • .btn--variation • .btn__component • .btn • &--variation

    • &__component • button.css • .variation • .component SMACSS-y BEM Sass CSS Modules/React • .btn • .btn-variation • .btn--component
  14. var XUIButton = React.createClass({ render: function() { return ( <button

    className="{this.props.type}"> {this.props.children} </button> ); } });
  15. var myStyle = { color: '#FFF', backgroundColor: '#330000' } var

    XUIButton = React.createClass({ render: function() { return ( <button style="{myStyle}"> {this.props.children} </button> ); }
  16. // 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);
  17. • Likely a year before all browsers support everything.
 •

    JavaScript Dependent
 • Phillip Walton’s Talk on Modular CSS with Web Components 
 http://snk.ms/27
  18. • Think about standardized and modular design.
 • Frameworks like

    React can help.
 • Web Components are coming. (So is winter.)