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 { ... } #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

CSS Architecture

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

...

.speaker { overow: hidden; /* Clearx */ padding: 20px; background-color: #fff; } .speaker .image { oat: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overow: hidden; }

...

...

...

• ...

.book { overow: hidden; /* Clearx */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { oat: left; margin-right: 20px; } .book .inner { overow: hidden; } .book .title { ... } ...

...

.event > a { display: block; } .event .thumbnail { oat: left; margin-right: 15px; } .event .inner { overow: hidden; }

...

/* Media */ .media { overow: hidden; /* Clearx */ } .media__image { oat: left; margin-right: 15px; } .media__body { overow: hidden; }

.speaker { overow: hidden; /* Clearx */ padding: 20px; background-color: #fff; } .speaker .image { oat: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overow: hidden; } .speaker { overow: hidden; /* Clearx */ padding: 20px; background-color: #fff; } .speaker .image { oat: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overow: hidden; }

.speaker { overow: hidden; /* Clearx */ padding: 20px; background-color: #fff; } .speaker .image { oat: left; margin-right: 15px; } .speaker .image > img { border-radius: 60px; } .speaker .inner { overow: hidden; }

.book { overow: hidden; /* Clearx */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { oat: left; margin-right: 20px; } .book .inner { overow: hidden; } .book .title { ... } ...

.event > a { display: block; } .event .thumbnail { oat: left; margin-right: 15px; } .event .inner { overow: hidden; }

...

...

...

• ...

.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

CSS

...

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

#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; }

#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; }

Components

Sharable Maintainable Easily-controlled

Components Web

Web Components Templates Shadow DOM HTML Imports - - - - Custom Elements

Templates

Custom Elements ! ! !

Custom Elements var element = Object.create( HTMLElement.prototype ); document.registerElement( 'my-alert', { prototype: element } );

Shadow DOM // element.createdCallback = function() { var template = document.querySelector('#my-media- template'); ! // templateDocumentFragmentcontent var content = template.content; ! // Shadow RootcontentShadowDOM var shadowRoot = this.createShadowRoot(); shadowRoot.appendChild( document.importNode(content, true) ); };

Shadow DOM // element.createdCallback = function() { var template = document.querySelector('#my-media- template'); ! // templateDocumentFragmentcontent var content = template.content; ! // Shadow RootcontentShadowDOM var shadowRoot = this.createShadowRoot(); shadowRoot.appendChild( document.importNode(content, true) ); }; = encapsulation

HTML Imports

Web Components - - - - Templates Shadow DOM HTML Imports Custom Elements

http://codepen.io/hiloki/full/obFui

...

...

...

...

/* */ .media { display: block; overow: hidden; /* Clearx */ color: indianred; } /* */ .media { display: block; overow: hidden; /* Clearx */ color: indianred; } /* */ .media { display: block; overow: hidden; /* Clearx */ color: indianred; } /* */ .media { display: block; overow: hidden; /* Clearx */ color: skyblue; } /* */ .media { display: block; overow: hidden; /* Clearx */ color: skyblue; } /* */ .media { display: block; overow: hidden; /* Clearx */ color: skyblue; } ::shadow /* */ .speaker::shadow .media { display: block; overow: hidden; /* Clearx */ background-image: url(orion.jpg); background-size: cover; } /* */ .speaker::shadow .media { display: block; overow: hidden; /* Clearx */ background-image: url(orion.jpg); background-size: cover; } Shadow DOM = encapsulation Custom Elements Shadow DOM = encapsulation Custom Elements Shadow DOM = encapsulation Custom Elements

Shadow DOM = encapsulation Custom Elements ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Shadow DOM = encapsulation Custom Elements ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Shadow DOM = encapsulation Custom Elements ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Shadow DOM = encapsulation Custom Elements ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

! Shadow DOM = encapsulation Custom Elements 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.ickr.com/photos/premshree/3444104640/ - - - - https://www.ickr.com/photos/ltdemartinet/8331549172/ https://www.ickr.com/photos/horiavarlan/4839454263/ https://www.ickr.com/photos/drewmaughan/8209503226/ Photos: