$30 off During Our Annual Pro Sale. View Details »

Planes, Trains, and CSS Components London CSS

Adam Onishi
September 20, 2016

Planes, Trains, and CSS Components London CSS

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

September 20, 2016
Tweet

More Decks by Adam Onishi

Other Decks in Technology

Transcript

  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. <div gallery %>" className('styles', 'image') %>" 'caption') %>" This is

    an image caption </div> <%= className('styles', 'gallery') %>
  9. 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
  10. No.

  11. <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>
  12. class OGallery extends HTMLElement { constructor() { super(); [...] }

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

    https://www.youtube.com/watch?v=2vWgJ7w3hu0
  14. <!-- Light DOM --> <o-gallery> <img src="#" alt="text"> <img src="#"

    alt="text"> <img src="#" alt="text"> </o-gallery>
  15. <template> <!-- Shadow DOM --> <div class="slides"> <div class="slide"></div> </div>

    <button class="control-left"></button> <button class="control-right"></button> </template>
  16. // 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);
  17. <!-- Composed DOM --> <o-gallery> #shadow-root <div class="slides"> <img src="/assets/img/plane.jpg"

    alt="Delayed plane"> </div> <button class="control-left"></button> <button class="control-right"></button> </o-gallery>
  18. <template> <style> :host { background-color: #333; } #slide { margin:

    0; } img { display: block; } .caption { color: #fff; } </style> </template>
  19. /* product CSS */ --caption-color: #fff1e0; /* Component styles */

    .caption { color: var(--caption-color, white); }
  20. o-gallery:not(:defined) { display: block; } o-gallery:not(:defined) img { display: none;

    } o-gallery:not(:defined) img:first-child { display: block; width: 100%; height: auto; }
  21. Apple objects to extending subclasses of HTMLElement using is= Ryosuke

    Niwa https://github.com/w3c/webcomponents/issues/509#issuecomment-222860736