Downloaded 104 times
Uploaded by拓樹 谷
21,200 views
Thinking about CSS Architecture
Frontrend in Osaka & Re:Creator's Kansai での講演スライド
Recommended
More Related Content
What's hot
More from 拓樹 谷
Thinking about CSS Architecture
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9..text { color:black;}.catchcopy { color: red;}#message .text { color: green;}
- 10.
- 11.k11l129 3610mIn 60mIn...aNdMoRe11l129 3611l129 3611111l129 3611l129 3611l129 3611l129 36¤¥
- 12.k10mIn BUgS...1 11±'llllllHH±'llllllHH±'llllllHH11l129 36¤¥
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.<div id="content"> <article> <h1>Article Title</h1> </article></div>
- 24.<div id="content"> <section> <h1>Article Title</h1> </section></div>
- 25.<div id="content"> <article> <p>2013/09/13</p> <h1>Article Title</h1> </article></div>
- 26.
- 27.
- 28.<div id="content"> <article> <p>2013/09/13</p> <h1 class="entry-title">Article Title</h1> </article></div>
- 29.<div id="content"> <div> <p>2013/09/13</p> <h2 class="entry-title">Article Title</h2> </div></div>
- 30.POCSSは壊れやすいCsS Is ToOFrAgIlE
- 31.
- 37.SEpArAtE CoNtAiNeR AnDCoNtEnTSEpArAtE StRuCtUrE AnD SkIn
- 38.SEpArAtE CoNtAiNeR AnDCoNtEnTSEpArAtE StRuCtUrE AnD SkIn
- 39.
- 40.<div class="media"> <divclass="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>
- 41.<div class="media"> <divclass="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>
- 42.<div class="media"> <divclass="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>
- 43..media { overflow:hidden; // Clearfix *zoom: 1; // Clearfix}.media-image { float: left; margin-right: 10px;}.media-image > img { display: block;}.media-body { overflow: hidden;}
- 44.<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>
- 45.<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>
- 46.SEpArAtE CoNtAiNeR AnDCoNtEnTSEpArAtE StRuCtUrE AnD SkIn
- 47.h2 { font-weight:bold; font-size: 16px;}#news h2 { border-bottom: 1px solid black; padding-bottom: 0.5em;}
- 48.h2 { font-weight:bold; font-size: 16px;}#news h2,#speakers h2 { border-bottom: 1px solid black; padding-bottom: 0.5em;}
- 49.<div id="speakers"> <h1>HirokiTani</h1> <h2>Session Title</h2> <div> <p>Summary</p> </div></div>
- 50.
- 51.<div id="speakers"> <h1>HirokiTani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div></div>
- 52.<div id="speakers"> <h1>HirokiTani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div></div>
- 53.<div id="speakers"> <h1>HirokiTani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div></div>
- 54.
- 55.h2 { font-weight:bold; font-size: 16px;}.headline { border-bottom: 1px solid black; padding-bottom: 0.5em;}
- 56.<div id="speakers"> <h1>HirokiTani</h1> <h2 class="headline">Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div></div>
- 57..heading { font-weight:bold; font-size: 16px;}.headline { border-bottom: 1px solid black; padding-bottom: 0.5em;}
- 58.<div id="speakers"> <h1>HirokiTani</h1> <h2 class="heading headline">SessionTitle</h2> <div> <p>...</p> </div> <div> <h2 class="heading">Books</h2> <ul> <li>...</li> </ul> </div></div>
- 59.
- 60.
- 61.
- 62.
- 63.®©°3iF YoU NeEdIt.11
- 64.
- 65.
- 66.
- 67./* # Base*/body, form {margin: 0;padding: 0;}a {color: #039;}a:hover {color: #03F;}
- 68./* # Layout*/.l-header, l-article, l-footer {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;}
- 69./* # Layout*/#header, #article, #footer {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;}
- 70./* # Layout*/.l-container {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;}
- 71./* # State*/.is-hidden { display: none;}.is-error { font-weight: bold; color: red;}.is-tab-active { border-bottom-color: transparent;}
- 72./* # Theme*//* ## Pink Theme CSS */.theme-header { background-image: url("/theme/pink/header.png");}.theme-border { 1px solid pink;}
- 73./* # Module*//* ## Button */.btn { ... }.btn-primary { ... }.btn-small { ... }/* ## UIlist */.uilist { ... }.uilist-item { ... }.uilist-item-icon { ... }/* ## Widget */.widget { ... }.widget-title { ... }.widget-body { ... }
- 74.<button class="btn btn-primary">Submit</button><ahref="/help" class="btn btn-small">Help</a><button class="btn btn-success btn-large">Complete!</button>
- 75.<div class="widget"> <h2>Title</h2><p>Text</p></div>
- 76..widget { ...}.widget p { margin-top: 10px; margin-bottom: 10px;}
- 77.<div class="widget"> <h2>Title</h2><ul> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul></div>
- 78..widget { ...}.widget p,.widget ul { margin-top: 10px; margin-bottom: 10px;}
- 79.<div class="widget"> <h2>Title</h2><ul class="widget-body"> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul></div>
- 80..widget { ...}.widget-body { margin-top: 10px; margin-bottom: 10px;}
- 81.
- 82.
- 83.®©°3, 6, 9,12, 15,‘RUlE Of ThReE’
- 84.®©°3, 6, 9,12, 15,‘RUlE Of ThReE’
- 85.®©°3, 6, 12,24, 48,‘RUlE Of ThReE’
- 86.®©°3, 6, 9,12, 15,‘RUlE Of ThReE’
- 87.®©°,‘RUlE Of ThReE’3,6, 9, 12, 15
- 88.®©°DOnAlD e, knUtH時期尚早な最適化は諸悪の根源である。...PrEmAtUrE OpTiMiZaTiOn Is ThE RoOt Of AlL EvIl.
- 89.
- 90.
- 91.®©°すべてのセマンティックがコンテンツ派生である必要はない。... NoT AlLSeMaNtIcS NeEd To Be CoNtEnT-DeRiVeD.NIcOlAs gaLlAgHeR
- 92.<div class="review"><h1>CSS Architecture</h1><pclass="reviewer">Review: <span>Hiroki Tani</span></p><time datetime="2013-09-14">2013/09/14</time><p class="review-summary">CSS Bible!</p><p class="review-description">...</p>Rating: <span class="rating">4.5</span></div>
- 93.<div itemscope itemtype="http://data-vocabulary.org/Review"><h1itemprop="itemreviewed">CSS Architecture</h1><p>Review: <span itemprop="reviewer">HirokiTani</span></p><time itemprop="dtreviewed"datetime="2013-09-14">2013/09/14</time><p itemprop="summary">CSS Bible!</p><p itemprop="description">...</p>Rating: <span itemprop="rating">4.5</span></div>
- 94.
- 95.
- 96./* Sass(.scss) */%btn{border-radius: 6px;padding: 0.5em 1em;background-color: #CCC;}.btn-primary {@extend %btn;background-image: linear-gradient(...);color: #FFF;}
- 97./* CSS */.btn-primary{border-radius: 6px;adding: 0.5em 1em;background-color: #CCC;background-image: linear-gradient(...);color: #FFF;}
- 98.
- 99./* Sass(.scss) */%btn{border-radius: 6px;padding: 0.5em 1em;background-color: #CCC;}%btn-primary {border-radius: 6px;padding: 0.5em 1em;background-color: #CCC;}%btn-large {font-size: 18px;}.save {@extend %btn;@extend %btn-primary;@extend %btn-large;}
- 100./* CSS */.save{border-radius: 6px;adding: 0.5em 1em;background-color: #CCC;background-image: linear-gradient(...);color: #FFF;font-size: 18px;}
- 101.
- 102..clearfix:after,.btn_type2_A:after,.bnaviul:after,.box_3col:after,.userDatadl:after,.likeTool:after,.likeUser ul:after,.commentUserul:after,.userData:after,.circleList lia:after,.time_count:after,.pagingul:after,.myData:after,.status:after,.bar:after,.month:after,.month2:after,.about:after,.sort:after,.mainListul:after,.mainList2liul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after,.radio:after,.btn_entry_2col:after,.sort2:after,ul#popup_message:after,.sort3:after,.f_circleList:after,.f_circleList a:after,.mainList3 dl:after,.mainList3ul:after,.box_2col:after,.frame_desc dl:after {content: "";display: block;clear: both;height: 0;}
- 103.
- 104./* # Module*//* ## Button */.btn { ... }.btn-primary { ... }.btn-small { ... }/* ## Widget */.widget { ... }.widget-title { ... }.widget-body { ... }
- 105.
- 106.
- 107.
- 108.
- 113..ranking { ...}.ranking__thumbnail { ... }.ranking__item { ... }.nav-line { ... }.nav-line__item { ... }.nav-line_separated { ... }.nav-line_separated__item { ... }
- 114./* # Module*//* ## Button */.btn { ... }.btn_primary { ... }.btn_small { ... }/* ## Widget */.widget { ... }.widget__title { ... }.widget__body { ... }
- 115./* # Module*//* ## Button */.btn { ... }.btn--primary { ... }.btn--small { ... }/* ## Widget */.widget { ... }.widget__title { ... }.widget__body { ... }
- 118.
- 119.
- 120.
- 124.
- 125.
- 126.
- 127./*A button suitablefor giving stars to someone.:hover - Subtle hover highlight..stars-given - A highlight indicating you've already given astar..stars-given:hover - Subtle hover highlight on top of stars-givenstyling..disabled - Dims the button to indicate it cannot be used.Styleguide 2.1.3.*/a.button.star{...}a.button.star.stars-given{...}a.button.star.disabled{...}
- 128.
- 129.
- 132.
- 133.
- 134.®©°どんなに多くの人が貢献したとしても、どのコードも一人で書いたようにする。ALl CoDe InAnY CoDe-BaSe ShOuLd LoOk LiKe A SiNgLe PeRsOntYpEd It, EvEn WhEn MaNy PeOpLe ArE CoNtRiBuTiNg To It.NIcOlAs gaLlAgHeR
- 135.
- 136.