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

CSS Components

Hiroki Tani
June 21, 2014

CSS Components

2014-06-21 Frontrend in Nagoya w/ HTML5 NAGOYA

Hiroki Tani

June 21, 2014
Tweet

More Decks by Hiroki Tani

Other Decks in Design

Transcript

  1. Beyond the CSS Architecture Components CSS

  2. Front-end Engineer Hiroki Tani github.com/hiloki twitter.com/hiloki inkdesign.jp

  3. CSS Mark-up

  4. CSS Mark-up Designer ➡

  5. CSS Mark-up Designer ➡ Engineer ⬅

  6. CSS

  7. Easy .text { color: red; }

  8. Hard too #main .article { ... } #main .article .title

    { ... } #main .breaking .title { ... } #header #logo img { ... } #header li#logoTop { ... } #header li#logoTop:after { .article-header .datetime s ul.member-list li.member a .widget p,.widget ul { ... } #sidebar .widget { ... } #sidebar li a.register{} body.landing #main sectio #slider #slider-control > di
  9. CSS Architecture

  10. http://codepen.io/hiloki/full/dnGeB

  11. None
  12. <div class="speaker"> <div class="image"> <img src="tani.jpg"> </div> <div class="inner"> <p

    class=“name”>…</p> <div class="biography"> <p>...</p> </div> </div> </div>
  13. None
  14. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color:

    #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  15. None
  16. <div class="book"> <div class="cover"> <img src="book.jpg"> </div> <div class="inner"> <p

    class="title">...</p> <p class="info"> ... </p> <div class="intro"> <p>...</p> </div> <ul class="shop"> <li>...</li> </ul> </div> </div>
  17. None
  18. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color:

    #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  19. None
  20. <div class="event"> <a href="event.html"> <div class="thumbnail"> <img src="event.jpg"> </div> <div

    class="inner"> <p class="event__name">...</p> </div> </a> </div>
  21. None
  22. .event > a { display: block; } .event .thumbnail {

    float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  23. None
  24. None
  25. None
  26. <div class="media speaker"> <div class="media__image image"> <img src="tani.jpg"> </div> <div

    class="media__body inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div>
  27. None
  28. /* Media */ .media { overflow: hidden; /* Clearfix */

    } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  29. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color:

    #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } … .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  30. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color:

    #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  31. None
  32. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color:

    #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  33. None
  34. .event > a { display: block; } .event .thumbnail {

    float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  35. None
  36. None
  37. <div class=“media book"> <div class=“media__image book__cover”> <img src="book.jpg"> </div> <div

    class=“media__body”> <p class="book__name">...</p> <p class="book__info"> ... </p> <div class="book__intro"> <p>...</p> </div> <ul class="book__shop"> <li>...</li> </ul> </div> </div>
  38. None
  39. .book { padding: 20px; background-color: #9DBCB8; color: #FFF; } .book__cover

    { margin-right: 20px; } .book__title { ... } ...
  40. OOCSS Nicole Sullivan @stubbornella

  41. OOCSS SMACSS BEM MCSS FLOCSS

  42. CSS Components

  43. = encapsulation Components

  44. Not perfect Components

  45. None
  46. <div class="book"> <div class="book__cover"> <p class=“book__name"> … </p> </div> </div>

  47. <div id="pickup"> <div class="book"> <div class="book__cover"> <p class="book__name"> CSS…</p>... </div>

    </div> </div> <div class="book"> <div class="book__cover"> <p class=“book__name"> … </p> </div> </div>
  48. None
  49. #pickup .book__name { color: #111; font-size: 2em; } ! .book__name

    { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; }
  50. None
  51. #pickup .book__name { color: #111; font-size: 2em; } ! .book__name

    { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; background-color: #333; padding: 6px; }
  52. None
  53. #pickup .book__name { color: #111; font-size: 2em; background-color: #FFF; padding:

    0; } ! .book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; background-color: #333; padding: 6px; }
  54. <style scoped>

  55. None
  56. <div><!-- Scope --> <style scoped> .book__name { background-color: #333; padding:

    6px; } </style> <div class=“media book"> <div class=“media__body”> <p class=“book__name”> … </p> </div> </div> </div>
  57. <style scoped> ⛼

  58. <style scoped> ⛼

  59. Components

  60. Sharable Maintainable Easily-controlled

  61. Components Web

  62. Web Components Templates Shadow DOM HTML Imports   

     Custom Elements
  63. Templates <template id="my-media-template"> <div class="media"> <div class="media__image"> <img> </div> <div

    class="media__body"> <content></content> </div> </div> </template>
  64. Custom Elements <google-map></google-map> ! <x-calendar today></x-calendar> ! <button is="like-button"></button> !

    <my-media src="tani.jpg" width="120" height="120">
  65. Custom Elements var element = Object.create( HTMLElement.prototype ); document.registerElement( 'my-alert',

    { prototype: element } );
  66. Shadow DOM // ΧελϜཁૉͷΠϯελϯε͕ੜ੒͞Εͨ࣌ʹ࣮ߦ͢Δ element.createdCallback = function() { var template

    = document.querySelector('#my-media- template'); ! // templateͷDocumentFragment͔ΒcontentΛऔಘ͢Δ var content = template.content; ! // Shadow RootʹcontentΛ௥Ճ͢ΔʢShadowDOMͷܗ੒ʣ var shadowRoot = this.createShadowRoot(); shadowRoot.appendChild( document.importNode(content, true) ); };
  67. Shadow DOM // ΧελϜཁૉͷΠϯελϯε͕ੜ੒͞Εͨ࣌ʹ࣮ߦ͢Δ element.createdCallback = function() { var template

    = document.querySelector('#my-media- template'); ! // templateͷDocumentFragment͔ΒcontentΛऔಘ͢Δ var content = template.content; ! // Shadow RootʹcontentΛ௥Ճ͢ΔʢShadowDOMͷܗ੒ʣ var shadowRoot = this.createShadowRoot(); shadowRoot.appendChild( document.importNode(content, true) ); }; = encapsulation
  68. HTML Imports <head> <link rel="import" href=“components/my-media.html"> </head>

  69. Web Components     Templates Shadow DOM HTML

    Imports Custom Elements
  70. http://codepen.io/hiloki/full/obFui

  71. None
  72. <my-media src=“sensui.jpg" width=“120" height=“120" class="speaker"> <p class=“speaker__name"> ઘਫ ᠳޗ </p>

    <div class="speaker__bio"> <p>…</p> </div> </my-media>
  73. None
  74. <my-media src="sensui.jpg" width="120" height="120" class="speaker"> <p class=“speaker__name"> ઘਫ ᠳޗ </p>

    <div class="speaker__bio"> <p>…</p> </div> </my-media>
  75. None
  76. <my-media src=“book.jpg" width=“100" height=“100" class="book"> <p class=“book__name"> ϑϩϯτΤϯυ… </p> <div

    class=“book__info”> <p>…</p> </div> … </my-media>
  77. None
  78. None
  79. <div class="media speaker"> <divclass=“media__image speaker__image”> <img src="tani.jpg" width="120"> </div> <div

    class="media__body"> <p class=“speaker__name"> ୩ ୓थ </p> ... </div> </div>
  80. None
  81. <my-media src=“sugimoto.jpg" width=“120" class="speaker"> <p class=“speaker__name"> ਿຊ ٢ষ </p> ...

    </my-media>
  82. None
  83. None
  84. <my-media src="sugimoto.jpg" width="120" class="speaker"> <div class="media"> <div class=“media__image"> <img src="tani.jpg"

    width="120"> </div> <div class="media__body"> <p class="speaker__name">ਿຊ ٢ষ</p> ... </div> </div> </my-media>
  85. None
  86. <div class="media speaker"> <div class="media__image speaker__image"> <img src="tani.jpg" width="120"> </div>

    <div class="media__body"> <p class="speaker__name">୩ ୓थ </p> ... </div> </div>
  87. /* <head> <style>…</style> </head> */ .media { display: block; overflow:

    hidden; /* Clearfix */ color: indianred; } ❓
  88. /* <head> <style>…</style> </head> */ .media { display: block; overflow:

    hidden; /* Clearfix */ color: indianred; }
  89. /* <head> <style>…</style> </head> */ .media { display: block; overflow:

    hidden; /* Clearfix */ color: indianred; }
  90. /* <template> <style>…</style> </template> */ .media { display: block; overflow:

    hidden; /* Clearfix */ color: skyblue; } ❓
  91. /* <template> <style>…</style> </template> */ .media { display: block; overflow:

    hidden; /* Clearfix */ color: skyblue; }
  92. /* <template> <style>…</style> </template> */ .media { display: block; overflow:

    hidden; /* Clearfix */ color: skyblue; }
  93. ::shadow

  94. /* <head> <style>…</style> </head> */ .speaker::shadow .media { display: block;

    overflow: hidden; /* Clearfix */ background-image: url(orion.jpg); background-size: cover; } ❓
  95. /* <head> <style>…</style> </head> */ .speaker::shadow .media { display: block;

    overflow: hidden; /* Clearfix */ background-image: url(orion.jpg); background-size: cover; }
  96. Shadow DOM = encapsulation Custom Elements <my-media></my-media>

  97. Shadow DOM = encapsulation Custom Elements

  98. Shadow DOM = encapsulation Custom Elements <my-media> <style> .media {

    display: block; overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 10px; } .media__body { overflow: hidden; } </style> <div class="media"> <div class=“media__image"></div> <div class="media__body"></div> </div> </my-media>
  99. Shadow DOM = encapsulation Custom Elements <my-media> ! ! !

    ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media>
  100. Shadow DOM = encapsulation Custom Elements <my-media> ! ! !

    ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media> ! <style> .media { display: table; } .media__image { display: table-cell; vertical-align: top; padding-right: 10px; } </style> <div class="media"> <div class=“media__image"></div> <div class="media__body"></div> </div>
  101. Shadow DOM = encapsulation Custom Elements <my-media> ! ! !

    ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media>
  102. Shadow DOM = encapsulation Custom Elements <my-media> ! ! !

    ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media> ! <style> .media { display: flex; align-items: flex-start; } .media__image { margin-right: 10px; } .media__body { flex: 1; } </style> <div class="media"> <div class=“media__image"></div> <div class="media__body"></div> </div> !
  103. Shadow DOM = encapsulation Custom Elements <my-media></my-media>

  104. HTML5 Rocks http://www.html5rocks.com/

  105. Polymer http://www.polymer-project.org/

  106. X-Tag http://www.x-tags.org/

  107. In future

  108. Polymer designer https://github.com/Polymer/designer

  109. Designer Builder Component Component

  110. Designer Builder Component Component

  111. Component Designer. Be a

  112. Thank you. github.com/hiloki twitter.com/hiloki inkdesign.jp

  113. https://www.flickr.com/photos/premshree/3444104640/     https://www.flickr.com/photos/ltdemartinet/8331549172/ https://www.flickr.com/photos/horiavarlan/4839454263/ https://www.flickr.com/photos/drewmaughan/8209503226/ Photos: