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

The purification of web development

The purification of web development

Nicolas Gallagher

May 30, 2013
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

Transcript

  1. “You cannot step twice into the same river; for fresh

    waters are flowing in upon you.” – Heraclitus
  2. “To increase the granularity of control over elements, a new

    attribute has been added to HTML: 'CLASS'.” - CSS1 spec
  3. “…authors are encouraged to use [class attribute] values that describe

    the nature of the content, rather than values that describe the desired presentation of the content.” - HTML5 spec
  4. “A structure based on CLASS is only useful within a

    restricted domain, where the meaning of a class has been mutually agreed upon.” - CSS1 spec
  5. /* Component */ .button {…} /* Component */ .button-group {…}

    /* Component modifier */ .button.primary {…} /* Component child */ .button-group .item {…}
  6. /* Component */ .Button {…} /* Component modifier */ .Button--primary

    {…} /* Component */ .ButtonGroup {…} /* Component descendant */ .ButtonGroup-item {…}
  7. <!-- HTML --> <ul class="ButtonGroup"> <li class="ButtonGroup-item"> <button class="Button"> Save

    </button> </li> <li class="ButtonGroup-item"> <button class="Button Button--cancel"> Cancel </button> </li> </ul>
  8. <article class="Box"> <div class="Box-close"> <button class="u-textLike js-close"> <span class="Icon Icon--close"></span>

    <span class="u-isHiddenVisually"> Close </span> </button> </div> ... </article>
  9. “Web Components…let web application authors define widgets with a level

    of visual richness not possible with CSS alone” - W3C Introduction to Web Components
  10. Shadow DOM Encapsulation and DOM boundaries <element> Custom elements; extend

    native elements <template> Clonable, inert DOM fragments
  11. <element extends="button" name="x-btnClose"> <template> <style> @host { /* css to

    unstyle button */ } .visHidden { /* css to hide text */ } </style> <x-icon type="close" size="24"></x-icon> <div class="visHidden"> <content></content> </div> </template> <script>// javascript</script> </element>