Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Beyond the CSS Architecture
Components
CSS
Front-end Engineer
Hiroki Tani
github.com/hiloki
twitter.com/hiloki
inkdesign.jp
CSS
Mark-up
CSS
Mark-up
Designer
➡
CSS
Mark-up
Designer
➡
Engineer
⬅
👎
CSS
Easy
.text {
color: red;
}
Hard
too
#main .article { ... }
#main .article .title { ... }
#main .breaking .title { ... }
#header #logo img { ... }
#he...
CSS Architecture
http://codepen.io/hiloki/full/dnGeB
<div class="speaker">
<div class="image">
<img src="tani.jpg">
</div>
<div class="inner">
<p class=“name”>…</p>
<div class...
.speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-ri...
<div class="book">
<div class="cover">
<img src="book.jpg">
</div>
<div class="inner">
<p class="title">...</p>
<p class="...
.book {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;...
<div class="event">
<a href="event.html">
<div class="thumbnail">
<img src="event.jpg">
</div>
<div class="inner">
<p clas...
.event > a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
…
<div class="media speaker">
<div class="media__image image">
<img src="tani.jpg">
</div>
<div class="media__body inner">
<...
/* Media */
.media {
overflow: hidden; /* Clearfix */
}
.media__image {
float: left;
margin-right: 15px;
}
.media__body {
ove...
.speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-ri...
.speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-ri...
.book {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;...
.event > a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
…
<div class=“media book">
<div class=“media__image book__cover”>
<img src="book.jpg">
</div>
<div class=“media__body”>
<p c...
.book {
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book__cover {
margin-right: 20px;
}
.book__title {
...
}...
OOCSS
Nicole Sullivan
@stubbornella
OOCSS
SMACSS
BEM
MCSS
FLOCSS
CSS
Components
= encapsulation
Components
Not perfect
Components
<div class="book">
<div class="book__cover">
<p class=“book__name">
…
</p>
</div>
</div>
<div id="pickup">
<div class="book">
<div class="book__cover">
<p class="book__name">
	 	 CSS…</p>...
</div>
</div>
</div>...
#pickup .book__name {
color: #111;
font-size: 2em;	
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: ...
☢
#pickup .book__name {
color: #111;
font-size: 2em;	
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: ...
#pickup .book__name {
color: #111;
font-size: 2em;	
background-color: #FFF;
padding: 0;
}
!
.book__name {
margin-bottom: 1...
<style scoped>
<div><!-- Scope -->
	 <style scoped>
	 .book__name {
	 background-color: #333;
	 padding: 6px;
	 }
	 </style>
	 <div class...
<style scoped>
⛼
<style scoped>
⛼
Components
Sharable
Maintainable
Easily-controlled
Components
Web
Web Components
Templates
Shadow DOM
HTML Imports
-
-
-
-
Custom Elements
Templates
<template
id="my-media-template">
<div class="media">
<div class="media__image">
<img>
</div>
<div class="media_...
Custom
Elements
<google-map></google-map>
!
<x-calendar today></x-calendar>
!
<button is="like-button"></button>
!
<my-med...
Custom
Elements
var element =
Object.create(
HTMLElement.prototype
);
document.registerElement(
'my-alert', {
prototype: e...
Shadow
DOM
// カスタム要素のインスタンスが生成された時に実行する
element.createdCallback = function() {
var template =
document.querySelector('#my-...
Shadow
DOM
// カスタム要素のインスタンスが生成された時に実行する
element.createdCallback = function() {
var template =
document.querySelector('#my-...
HTML
Imports
<head>
<link
rel="import"
href=“components/my-media.html">
</head>
Web Components
-
-
-
-
Templates
Shadow DOM
HTML Imports
Custom Elements
http://codepen.io/hiloki/full/obFui
<my-media src=“sensui.jpg"
width=“120"
height=“120"
class="speaker">
<p class=“speaker__name">
泉水 翔吾
</p>
<div class="spea...
<my-media src="sensui.jpg"
width="120"
height="120"
class="speaker">
<p class=“speaker__name">
泉水 翔吾
</p>
<div class="spea...
<my-media src=“book.jpg"
width=“100"
height=“100"
class="book">
<p class=“book__name">
フロントエンド…
</p>
<div class=“book__inf...
<div class="media speaker">
<divclass=“media__image
speaker__image”>
<img src="tani.jpg" width="120">
</div>
<div class="m...
<my-media src=“sugimoto.jpg"
width=“120"
class="speaker">
<p class=“speaker__name">
杉本 吉章
</p>
...
</my-media>
<my-media src="sugimoto.jpg"
width="120" class="speaker">
<div class="media">
<div class=“media__image">
<img src="tani.jp...
<div class="media speaker">
<div class="media__image
speaker__image">
<img src="tani.jpg" width="120">
</div>
<div class="...
/* <head>
<style>…</style>
</head> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: indianred;
}
❓
/* <head>
<style>…</style>
</head> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: indianred;
}
/* <head>
<style>…</style>
</head> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: indianred;
}
/* <template>
<style>…</style>
</template> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: skyblue;
}
❓
/* <template>
<style>…</style>
</template> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: skyblue;
}
/* <template>
<style>…</style>
</template> */
.media {
display: block;
overflow: hidden; /* Clearfix */
color: skyblue;
}
::shadow
👻
/* <head>
<style>…</style>
</head> */
.speaker::shadow .media {
display: block;
overflow: hidden; /* Clearfix */
background-...
/* <head>
<style>…</style>
</head> */
.speaker::shadow .media {
display: block;
overflow: hidden; /* Clearfix */
background-...
Shadow
DOM
= encapsulation
Custom
Elements
<my-media></my-media>
Shadow
DOM
= encapsulation
Custom
Elements
Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
<style>
.media {
display: block;
overflow: hidden; /* Clearfix */
}
.m...
Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>
Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>
!
<style>
.media {
displ...
Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>
Shadow
DOM
= encapsulation
Custom
Elements
<my-media>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
</my-media>
!
<style>
.media {
displ...
Shadow
DOM
= encapsulation
Custom
Elements
<my-media></my-media>
HTML5 Rocks
http://www.html5rocks.com/
Polymer
http://www.polymer-project.org/
X-Tag
http://www.x-tags.org/
In future
Polymer designer
https://github.com/Polymer/designer
Designer
Builder
Component
Component
💎 Designer
Builder
Component
Component
Component Designer.
Be a
Thank you.
github.com/hiloki
twitter.com/hiloki
inkdesign.jp
💐
https://www.flickr.com/photos/premshree/3444104640/
-
-
-
-
https://www.flickr.com/photos/ltdemartinet/8331549172/
https://w...
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
CSS Components
Upcoming SlideShare
Loading in …5
×

CSS Components

2,712 views

Published on

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

Published in: Design, Technology
  • Be the first to comment

CSS Components

  1. 1. Beyond the CSS Architecture Components CSS
  2. 2. Front-end Engineer Hiroki Tani github.com/hiloki twitter.com/hiloki inkdesign.jp
  3. 3. CSS Mark-up
  4. 4. CSS Mark-up Designer ➡
  5. 5. CSS Mark-up Designer ➡ Engineer ⬅
  6. 6. 👎 CSS
  7. 7. Easy .text { color: red; }
  8. 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. 9. CSS Architecture
  10. 10. http://codepen.io/hiloki/full/dnGeB
  11. 11. <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>
  12. 12. .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; } …
  13. 13. <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>
  14. 14. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  15. 15. <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>
  16. 16. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  17. 17. <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>
  18. 18. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  19. 19. .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; } …
  20. 20. .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; } …
  21. 21. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  22. 22. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  23. 23. <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>
  24. 24. .book { padding: 20px; background-color: #9DBCB8; color: #FFF; } .book__cover { margin-right: 20px; } .book__title { ... } ...
  25. 25. OOCSS Nicole Sullivan @stubbornella
  26. 26. OOCSS SMACSS BEM MCSS FLOCSS
  27. 27. CSS Components
  28. 28. = encapsulation Components
  29. 29. Not perfect Components
  30. 30. <div class="book"> <div class="book__cover"> <p class=“book__name"> … </p> </div> </div>
  31. 31. <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>
  32. 32. #pickup .book__name { color: #111; font-size: 2em; } ! .book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; }
  33. 33.
  34. 34. #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; }
  35. 35. #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; }
  36. 36. <style scoped>
  37. 37. <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>
  38. 38. <style scoped> ⛼
  39. 39. <style scoped> ⛼
  40. 40. Components
  41. 41. Sharable Maintainable Easily-controlled
  42. 42. Components Web
  43. 43. Web Components Templates Shadow DOM HTML Imports - - - - Custom Elements
  44. 44. Templates <template id="my-media-template"> <div class="media"> <div class="media__image"> <img> </div> <div class="media__body"> <content></content> </div> </div> </template>
  45. 45. 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">
  46. 46. Custom Elements var element = Object.create( HTMLElement.prototype ); document.registerElement( 'my-alert', { prototype: element } );
  47. 47. 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) ); };
  48. 48. 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
  49. 49. HTML Imports <head> <link rel="import" href=“components/my-media.html"> </head>
  50. 50. Web Components - - - - Templates Shadow DOM HTML Imports Custom Elements
  51. 51. http://codepen.io/hiloki/full/obFui
  52. 52. <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>
  53. 53. <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>
  54. 54. <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>
  55. 55. <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>
  56. 56. <my-media src=“sugimoto.jpg" width=“120" class="speaker"> <p class=“speaker__name"> 杉本 吉章 </p> ... </my-media>
  57. 57. <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>
  58. 58. <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>
  59. 59. /* <head> <style>…</style> </head> */ .media { display: block; overflow: hidden; /* Clearfix */ color: indianred; } ❓
  60. 60. /* <head> <style>…</style> </head> */ .media { display: block; overflow: hidden; /* Clearfix */ color: indianred; }
  61. 61. /* <head> <style>…</style> </head> */ .media { display: block; overflow: hidden; /* Clearfix */ color: indianred; }
  62. 62. /* <template> <style>…</style> </template> */ .media { display: block; overflow: hidden; /* Clearfix */ color: skyblue; } ❓
  63. 63. /* <template> <style>…</style> </template> */ .media { display: block; overflow: hidden; /* Clearfix */ color: skyblue; }
  64. 64. /* <template> <style>…</style> </template> */ .media { display: block; overflow: hidden; /* Clearfix */ color: skyblue; }
  65. 65. ::shadow 👻
  66. 66. /* <head> <style>…</style> </head> */ .speaker::shadow .media { display: block; overflow: hidden; /* Clearfix */ background-image: url(orion.jpg); background-size: cover; } ❓
  67. 67. /* <head> <style>…</style> </head> */ .speaker::shadow .media { display: block; overflow: hidden; /* Clearfix */ background-image: url(orion.jpg); background-size: cover; }
  68. 68. Shadow DOM = encapsulation Custom Elements <my-media></my-media>
  69. 69. Shadow DOM = encapsulation Custom Elements
  70. 70. 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>
  71. 71. Shadow DOM = encapsulation Custom Elements <my-media> ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media>
  72. 72. 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>
  73. 73. Shadow DOM = encapsulation Custom Elements <my-media> ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! </my-media>
  74. 74. 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> !
  75. 75. Shadow DOM = encapsulation Custom Elements <my-media></my-media>
  76. 76. HTML5 Rocks http://www.html5rocks.com/
  77. 77. Polymer http://www.polymer-project.org/
  78. 78. X-Tag http://www.x-tags.org/
  79. 79. In future
  80. 80. Polymer designer https://github.com/Polymer/designer
  81. 81. Designer Builder Component Component
  82. 82. 💎 Designer Builder Component Component
  83. 83. Component Designer. Be a
  84. 84. Thank you. github.com/hiloki twitter.com/hiloki inkdesign.jp 💐
  85. 85. 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:

×