• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
モダンなCSS設計パターンを考える
 

モダンなCSS設計パターンを考える

on

  • 23,755 views

HTML5 Conference 2013 "モダンなCSS設計パターンを考える" のセッションスライドです。

HTML5 Conference 2013 "モダンなCSS設計パターンを考える" のセッションスライドです。

Statistics

Views

Total Views
23,755
Views on SlideShare
15,662
Embed Views
8,093

Actions

Likes
115
Downloads
135
Comments
0

19 Embeds 8,093

http://stocker.jp 5438
http://c-note.chatwork.com 1851
http://horaotoko.heroku.com 284
http://itakura26.hateblo.jp 146
https://twitter.com 143
http://ysngats.rakusaba.jp 131
http://cowoco.net 35
http://idcf.localhost 26
http://eventifier.com 11
http://localhost 7
http://eventifier.co 6
http://feedly.com 4
http://www.eventifier.com 2
https://www.chatwork.com 2
http://plus.url.google.com 2
http://bootstrap.oktopic.com 2
http://eventifier.info 1
https://m.facebook.com&_=1385976828069 HTTP 1
http://www.eventifier.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    モダンなCSS設計パターンを考える モダンなCSS設計パターンを考える Presentation Transcript

    • モダンなCSS設計パターンを考える Modern CSS Architecture Hiroki Tani HTML5 Conference 2013
    • Hiroki Tani CyberAgent, Inc.
    • http://frontrend.github.io/ Frontrend in Sapporo Frontrend in Fukuoka 2013年12月7日 2013年1月
    • Why Architecture ?
    •   
    •   
    •   
    • #news h2 { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
    • #news h2 { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
    • #news h2 { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } #service .feature .title { border: 1px solid black; padding: 0.5em; font-size: 16px; }
    • .column_2 #inbox .list { ... } .column_3 #inbox .list { ... } .column_3 #inbox .list .name { ... } .column_3 #inbox .list .name p { ... .column_3 #inbox .list .name.reply { .column_3 #inbox .list .name.reply a body#top .column_3 #inbox .list.left } ... } { ... } { ... }
    • !important
    • Goals of Better CSS Architecture - Predictable - Reusable - Maintainable - Scalable 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい http://enja.studiomohawk.com/2013/07/06/css-architecture/
    • Modular CSS
    • OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
    • OOCSS - Separate structure and skin 構造と見た目の分離 - Separate container and content コンテナとコンテンツの分離
    • Media object
    • <div class="media"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
    • <div class="media"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
    • <div class="media"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
    • .media { /* Clearfix */ } .media-image { float: left; margin-right: 10px; } .media-image img { > display: block; } .media-body { overflow: hidden; }
    • <div class="media skin-a"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
    • <div class="media skin-b"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
    • How to build modules ?
    • It depends.
    • Rule of Three ‘Refactoring’ http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
    • 3, 6
    • 3, 6, 9, 12, 15 ...
    • 3, 6, 12, 24, 48 ...
    • 3, 6, 9
    • 3, 6, 9, 12, 15 ...
    • .fontSize10 { font-size: 10px } .colorRed { color: red }
    • <p class="fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
    • <p class="box radius10 fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
    • .colorRed { color: red }
    • .colorRed { color: orange; } ⚠
    • .colorRed { color: orange; /* あとで直す */ } ⚠
    • .fontSize18 { font-size: 18px }
    • .fontSize18 { font-size: 18px } @media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px } } ⚠
    • .radius6 { border-radius: } .radius10 { border-radius: } .radius12 { border-radius: } .radius14 { border-radius: } 6px; 10px; 12px; 14px; ⚠
    • How to maintain modules ?
    • SMACSS Jonathan Snook http://smacss.com/ja
    • 日本語、あります SMACSS Jonathan Snook http://smacss.com/ja
    • SMACSS - Categorization カテゴライズ - Naming Convention 命名規則 - Decoupling CSS from HTML HTMLとCSSの分離
    • SMACSS Categories - Base - Layout - State - Theme - Module
    • /* # Base */ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
    • /* # Layout */ #header { width: 960px; margin: auto; } .l-article { border: solid #CCC; border-width: 1px 0 0; } .l-grid { margin: 0; padding: 0; list-style-type: none; } .l-grid > li { display: inline-block; margin: 0 0 10px 10px; }
    • /* # State */ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
    • /* # Theme */ /* ## Spring Theme CSS */ .theme-header { background-image: url("/theme/spring/ header.png"); } .theme-border { 1px solid pink; }
    • Message-box http://cdpn.io/hKBkm
    • <div class="msg"> <p>...</p> </div> .msg { display: block; border: 1px solid #cccccc; border-radius: 8px; padding: 1em; background-color: #efefef; color: #333333; }
    • <div class="msg msg-error"> <p>...</p> </div> .msg { ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
    • <div class="msg msg-success"> <p>...</p> </div> .msg { ... } .msg-success { border: 1px solid #27ae60; background-color: #99f3c9; }
    • <div class="msg msg-error"> <h2>...</h2> <p>...</p> </div>
    • <div class="msg msg-error"> <h2>...</h2> <p>...</p> </div> .msg h2 { font-size: inherit; font-weight: bold; } .msg p { margin-top: 0.6em; }
    • .msg h2 { font-size: inherit; font-weight: bold; } .msg ul, .msg p { margin-top: 0.6em; }
    • .msg h2 { font-size: inherit; font-weight: bold; } .msg ul, .msg p { margin-top: 0.6em; } ⚠
    • <div class="msg msg-error"> <h2 class="msg-title"> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
    • .msg-title { font-size: inherit; font-weight: bold; } .msg-body { margin-top: 0.6em; }
    • <div class="msg msg-error"> <p class="msg-title"> ... </p> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
    • <div class="msg msg-error"> <h2 class="msg-title"> <i class="msg-title-icon ico ico-label ico-alert"></i> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
    • .msg-title-icon { vertical-align: -0.3em; } .ico { display: inline-block; } .ico-alert { background-image: url(...); width: 24px; height: 24px; } .ico-label { margin-right: 0.3em; }
    • %ico { display: inline-block; } %ico-alert { background-image: url(...); width: 24px; height: 24px; } %ico-label { margin-right: 0.3em; } .msg-error-icon { vertical-align: -0.3em; @extend %ico; @extend %ico-alert; @extend %ico-label; }
    • .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
    • .msg-title { font-size: inherit; font-weight: bold; } .msg-body { margin-top: 0.6em; }
    • .msg { ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; } .msg-title { font-size: inherit; font-weight: bold; }
    • BEM Yandex http://bem.info/
    • BEM stands for ... - Block - Element - Modifier
    • Block
    • Element
    • Modifier
    • .block { ... } .block__element { ... } .block_modifier { ... } .block__element_modifier { ... }
    • .nav { ... } .nav__item { ... } .nav_segmented { ... } .nav__item_segmented { ... }
    • .nav { ... } .nav__item { ... } .nav--segmented { ... } .nav__item--segmented { ... } http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
    • .msg { ... } .msg--error { border: 1px solid #c0392b; background-color: #fe9282; }
    • .msg__title { font-size: inherit; font-weight: bold; } .msg__body { margin-top: 0.6em; } .msg__title-icon { vertical-align: -0.3em; }
    • MCSS - Base - Project - cosmetic http://operatino.github.io/MCSS/en/
    • inuit.css - Base - Generic - Objects http://inuitcss.com/
    • SUIT - Utilities - Components https://github.com/suitcss/suit
    • Front-end Styleguide
    • Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/
    • Pattern Primer http://patternprimer.adactio.com/
    • MailChimp Pattern Library http://ux.mailchimp.com/patterns/
    • Twitter Bootstrap http://getbootstrap.com
    • KSS http://warpspire.com/kss/styleguides/
    • Kalei http://kaleistyleguide.com/
    • StyleDocco http://jacobrask.github.io/styledocco/
    • // // # 見出し // // 説明文を書きます。マークダウン形式です。 // // ``` // <button type="button" class="btn btn-default"> // ``` で囲んだ部分にデモのHTMLを記述します。 // </button> // ``` .btn { display: inline-block; ... &:hover, &:focus { color: @btn-default-color; text-decoration: none; } }
    • $ styledocco -n "ProjectName" css/ $ styledocco -n "ProjectName" -o "mydocs" $ styledocco -n "ProjectName" --preprocessor "lessc" less/
    • Building Pages 🎬⚏ 👤 👤 
    • Building Pages 🎬⚏ 👤 👤  🎬⚏    👤
    • Building Pages Systems  🎬⚏  🎬⚏ 👤 👤   👤
    • Developer vs Designer ?
    • 🎬⚏ 👤 👤 
    • 🎬⚏ 👤 👤   
    • 🎬⚏ 👤 👤    
    • 🎬⚏ 👤 👤     
    • 🎬⚏ 👤 👤      
    •    🎬⚏ 👤 👤    
    •     🎬⚏ 👤 👤    
    • Developer with Designer
    • Best Practice
    • Best Practices
    • “ どんなに多くの人が貢献したとしても どのコードも一人で書いたようにする All code in any code-base should look like a single person typed it, even when many people are contributing to it. ” - Idiomatic CSS https://github.com/necolas/idiomatic-css
    • “ 壊れない完璧な設計を求めるのではなく 壊れたときに勇気をもって修復できる設計を - Anonymous ”
    • Thanks. - twitter.com/hiloki - inkdesign.jp - html5experts.jp/hiloki/
    • Photo credit - http://www.flickr.com/photos/bpotstra/3490333174/sizes/l/ http://www.flickr.com/photos/bettybroadbent/3704523854/sizes/o/ http://www.flickr.com/photos/drewmaughan/8209503226/sizes/l/ http://www.flickr.com/photos/biodork/6849406792/ http://www.flickr.com/photos/43266097@N03/9444574320/sizes/l/ http://www.flickr.com/photos/90585146@N08/8234225693/sizes/l/ http://www.flickr.com/photos/lwr/6778863776/sizes/l/ http://www.flickr.com/photos/jezpage/4696962046/ http://www.flickr.com/photos/april-mo/8485249298/sizes/l/ http://www.flickr.com/photos/4st4roth/2366615948/ http://www.flickr.com/photos/sharman/4570412801/sizes/l/ http://www.flickr.com/photos/kaptainkobold/3771497484/ http://www.flickr.com/photos/laurie_pink/2549598674/sizes/l/ http://www.flickr.com/photos/dansdata/3266946102/ http://www.flickr.com/photos/ochre_jelly/6839227477/sizes/l/ http://www.flickr.com/photos/in-duce/2232109985/sizes/o/ http://www.flickr.com/photos/pgoyette/5911926699/sizes/z/ http://www.flickr.com/photos/conradoplg/10091603396/sizes/l/ http://www.flickr.com/photos/kaptainkobold/4441509147/sizes/l/