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

Planes, Trains, and CSS Components

Planes, Trains, and CSS Components

The way we’re meant to be writing CSS appears to be in constant flux! What’s the safest route? Do we go for just writing vanilla CSS - is this the simplest and thus the safest? What about pre-processors like Sass or LESS? Or, do we look for more adventure with off-road vehicles like JavaScript or Web Components?

Join me as I take you on a journey through these different techniques for creating components. We’ll tackle all the bumps in the road head-on and fly straight into the eye of the storm, as we loop and swerve around development opinions.

The best thing about this journey, is we’ll see what it takes to engineer a component system for a large organisation. Using the best techniques available to us, both old and new. Ensuring styles are reusable, transferable, and easy to use across a variety of teams and products.

Adam Onishi

July 25, 2016

More Decks by Adam Onishi

Other Decks in Technology


  1. <div class="o-gallery" o-gallery> <ul class="o-gallery__content"> <li class="o-gallery__slide"> <figure class="o-gallery__figure"> <img

    src="#" alt="text" class="o-gallery__image"> <figcaption class="o-gallery__caption"> This is an image caption </figcaption> </figure> </li> </ul> </div>
  2. .o-gallery__control { position: absolute; top: 50%; width: 30px; height: 70px;

    } .o-gallery__control--left { left: 0; background-image: url(''), none; } .o-gallery__control--right { right: 0; background-image: url(''), none; }
  3. Alice Bartlett Origami Lead, Financial Times @alicebartlett Can’t you make

    it more like Bootstrap? Considerations for building front end systems
  4. /// General styling for the gallery @mixin oGallery { [...]

    } /// Styling for the gallery title @mixin oGalleryTitle { [...] }
  5. [CSS where] all class names and animation names are scoped

    locally by default CSS Modules Spec https://github.com/css-modules/css-modules
  6. .btn-primary { background: white; border: 1px solid red; color: red;

    } .btn-secondary { composes: btn-primary; border-color: blue; color: blue; }
  7. <div class="<%= className('styles', 'gallery') %>" o- gallery> <ul class="<%= className('styles',

    'content') %>"> <li class="<%= className('styles', 'slide') %>"> <figure class="<%= className('styles', 'figure') %>"> <img src="#" alt="#" class="<%= className('styles', 'image') %>"> <figcaption class="<%= className('styles', 'caption') %>"> This is an image caption </figcaption> </figure> </li> </ul> </div>
  8. .M-10 { margin: 10px; } .Fl-start { float: left; }

    .Mend-10 { margin-right: 10px; } .Fz-s { font-size: smaller; }
  9. .tabs { composes: width-100 from 'size'; composes: reset from 'list';

    composes: flex from 'display'; /* tablet and up */ composes: block from 'display/tablet'; } .item { composes: inline-block from 'display'; composes: solid top-reset right-reset bottom left-reset from 'border'; composes: top bottom from 'padding'; composes: pointer from 'cursor'; composes: ui all from 'transition'; }
  10. We decided to solve the main Atomic CSS-related problems using

    the power of CSS Modules, getting all the benefits of both solutions. Michele Bertoli https://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27#.p7jtpneoh
  11. No.

  12. class OGallery extends HTMLElement { constructor() { super(); [...] }

    [...] } customElements.define('o-gallery', OGallery);
  13. This is where things get spooky and weird! Soledad Penades

  14. // Attaches a shadow Root to your element const shadowRoot

    = this.attachShadow({mode: 'open'}); // Get the custom template, clone it const template = document.querySelector('#o-gallery'); const clone = this.importNode(template, true); // Insert it into our shadow DOM shadowRoot.appendChild(clone);
  15. <template> <style> :host { background-color: #333; } .slide { margin:

    0; } img { display: block; } .caption { color: #fff; } </style> </template>