メンテナブルでありつづけるためのCSS設計
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

メンテナブルでありつづけるためのCSS設計

on

  • 433 views

2014年11月8日 大阪

2014年11月8日 大阪
「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。

Statistics

Views

Total Views
433
Views on SlideShare
416
Embed Views
17

Actions

Likes
13
Downloads
3
Comments
0

2 Embeds 17

https://twitter.com 18
http://funnis.net 2

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設計 Presentation Transcript

  • 1. ًٝذشـٕד֮׶אבֽ׷׋׭ך$44鏣鎘 8FCⵖ⡲罏ך׋׭ך$44鏣鎘ך侄猰剅$44ؔآ؟ٝ
  • 2. http://www.slideshare.net/hiloki/thinking-about-css-architecture
  • 3. 靼䬪埠 Hiroki Tani Front-end Engineer ! github.com/hiloki " twitter.com/hiloki inkdesign.jp
  • 4. 1994.10.10
  • 5. http://codepen.io/hiloki/full/ahdEF
  • 6. 20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  • 7. 20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  • 8. $44כ㠨׸װְׅ
  • 9. 㠨׸װְׅ ͑ 僒׃ְ
  • 10. Easy .text { color: green; }
  • 11. Easy .text { color: green; } ! .lead .text { color: blue } <div class="lead"> </div>
  • 12. too Fragile #main { ... } #main .article { ... } #main .article .title { #main .breaking .title { #header #logo img { ... #header li#logoTop { ... #header li#logoTop:after .article-header .datetime ul.member-list li.member .widget p,.widget ul { ... #sidebar .widget { ... } #sidebar li a.register{} body.landing #main section #slider-control > div { #bannerList li div#rotate
  • 13. ! ⏲ # 
  • 14. 㠨׸זְ㸣樴ז鏣鎘׾実׭׷ךדכזֻծ 㠨׸׋הֹח⹃孡׾䭯׏ג⥜䗁דֹ׷鏣鎘׾ ˑ 俕谏牂⛲
  • 15. OOCSS Nicole Sullivan @stubbornella
  • 16. http://codepen.io/hiloki/full/dnGeB
  • 17. <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>
  • 18. .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; } …
  • 19. <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>
  • 20. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 21. <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>
  • 22. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 23. %
  • 24. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 25. <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>
  • 26. <div class="media book"> <div class="media__image cover"> <img src="book.jpg"> </div> <div class="media__body inner"> <p class="title">...</p> <p class="info"> ... </p> <div class="intro"> <p>...</p> </div> <ul class="shop"> <li>...</li> </ul> </div> </div>
  • 27. <div class="media event"> <a href="event.html"> <div class="media__image thumbnail"> <img src="event.jpg"> </div> <div class="media__body inner"> <p class="event__name"> … </p> </div> </a> </div>
  • 28. .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; } …
  • 29. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 30. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 31. OOCSS
  • 32. OOCSS SMACSS BEM SUIT CSS AMCSS MCSS FLOCSS
  • 33. ⥯ך $44鏣鎘ךه؎ٝز
  • 34. 1 إؙٖةכ崮ֻծ䠐㔳涸ח
  • 35. 2 ㄏせ鋉⵱׾䭯א
  • 36. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 37. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
  • 38. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media > .image { float: left; margin-right: 15px; } .media > .body { overflow: hidden; }
  • 39. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 40. https://github.com/hiloki/flocss
  • 41. /* Media */ .c-media { overflow: hidden; /* Clearfix */ } .c-media__image { float: left; margin-right: 15px; } .c-media__body { overflow: hidden; }
  • 42. <!-- 一般的でない略称は避ける --> <div class="c-wdt p-rcmdTpcs__li"> よくわからない </div> ! <div class="c-widget p-recommendTopics__list"> 長い...が分かる </div>
  • 43. /* Emmet/Zen-codingのAliasを参考にする */ .u-mts { margin-top: 10px } /* margin-top small */ .u-vam { vertical-align: middle } .u-fl { float: left }
  • 44. 3 㔐粸׶鵤׃׋׵؝ٝه٦طٝزךⱄ鏣鎘
  • 45.   @ @ @ 
  • 46.      
  • 47.      
  • 48.    @ @ 
  • 49.      
  • 50. 4 +4ךة٦؜حزחأة؎ٕ׾䭯׋ׇזְ
  • 51. $('.profile .button') .on('click', function(e){ ... });
  • 52. <div class="profile"> ... <button class="button"> Save! </button> </div>
  • 53. <div class="profile"> ... <button class=“profile__button”> Save! </button> </div>
  • 54. $('.js-save-profile') .on('click', function(e){ ... });
  • 55. /* スタイルを持たせてはいけない */ .js-save-profile { ... }
  • 56. <div class="profile"> ... <button class=“button js-save-profile“> Save! </button> </div>
  • 57. <div class="profile"> ... <button class=“profile__button js-save-profile”> Save! </button> </div>
  • 58. <button class="c-button js-tap”> Tappable </button> ! <!-- カスタムデータ属性を使う --> <button class="c-button" data-tap> Tappable </button>
  • 59. 5 TUZMF㾩䚍דך鎸鶢כ窫㼎׃זְ
  • 60. <div style=“margin-bottom: 242px">blah blah blah</div>
  • 61. 6 ؝٦سךⱄⵃ欽ָׅץגדכזְ
  • 62. <h1 class="section heading"> The Heading </h1> ! <div class="section"> The Box </div>
  • 63. .section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; font-size: 18px; font-weight: bold; }
  • 64. .section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; font-size: 18px; font-weight: bold; }
  • 65. <h1 class="heading"> The Heading </h1> ! <div class="section"> The Box </div>
  • 66. .s-box { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; }
  • 67. <h1 class=“s-box heading”> The Heading </h1> ! <div class="s-box section"> The Box </div>
  • 68. 7 رؠ؎ش٦הך؝ىُص؛٦ءّٝ
  • 69. $44فٔفٗإح؟כ鏣鎘ך㉏겗׾鍑寸ׅ׷
  • 70. No. 
  • 71. .btn { ... } ! .btn--primary { background-color: #F31; color: #FFF; } ! .btn--large { font-size: 1.5em; }
  • 72. <a class="btn btn--primary">Save</a> ! <a class="btn btn--primary btn--large">Register</a>
  • 73. %btn { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! %btn--primary { background-color: #F31; color: #FFF; font-weight: 700; } ! %btn--large { font-size: 1.5em; }
  • 74. .save-button { @extend %btn; @extend %btn--primary; } ! .register-button { @extend %btn; @extend %btn--primary; @extend %btn--large; }
  • 75. .save-button, .register-button { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! .save-button, .register-button { background-color: #F31; color: #FFF; font-weight: 700; } ! .register-button { font-size: 1.5em; }
  • 76. <a class="save-button">Save</a> ! <a class="register-button">Register</a>
  • 77. Smart!
  • 78. Smart! ׃ַ׃䪔ְָꨇ׃ְ
  • 79. .mod_listType1 { section { margin-bottom:1em; } h1 { margin:0 0 .5em .5em; font-size:fz(15); -webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75); text-shadow:0px 1px 0px rgba(255,255,255,0.75); } ul { background-color:#ffffff; border:#c3c3c3 1px solid; overflow:hidden; @include radius(12px); li { border-top:#C3C3C2 1px solid; margin-top:-1px; margin-bottom:1px; font-size:fz(16); &:first-child { a.disable { @include radius-tr(12px); @include radius-tl(12px); }
  • 80. /* listType */ .mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5 section, .mod_listType8 section, .mod_listType7 section { margin-bottom: 1em; } .mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8 h1, .mod_listType7 h1 { margin: 0 0 .5em .5em; font-size: 15px; -webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); } .mod_listType1 ul, .mod_H[JQ䖓 listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8 ul, .mod_listType7 ul { background-border: overflow: border-440kb color: #ffffff; #c3c3c3 1px solid; hidden; radius: 12px; } .mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul li, .mod_listType7 ul li { border-top: #C3C3C2 1px solid; margin-top: -1px; margin-bottom: 1px; font-size: 16px; } .mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child a.disable, .mod_listType7 ul li:first-child a.disable { border-radius: 12px; border-radius: 12px; } .mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child a.disable, .mod_listType7 ul li:last-child a.disable { border-radius: 12px; border-radius: 12px;
  • 81. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 82. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 83. .c-button--primary { $primaryColor: #F31; background-color: $primaryColor; &:hover { background-color: mix($primaryColor,#FFF,80%); } }
  • 84. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 85. // pc.app.scss // // Foundation @import "foundation/normalize"; @import "foundation/variables"; @import "foundation/mixin"; @import “foundation/base”; ! // Layout @import "layout/app"; ! // Object @import "object/components/button"; @import "object/components/avatar"; @import "object/components/media"; @import "object/project/header"; @import "object/project/profile"; @import "object/project/articles";
  • 86. // object/project/_profile.scss // // =============== // # Profile // =============== ! .p-profile {...} .p-profile__avatar {...} .p-profile__name {...} .p-profile__biography {...} ...
  • 87. pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
  • 88. pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
  • 89. /** * Concatenation **/ concat: { pc: { files: { 'temp/pc.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/*.scss', 'app/stylesheets/object/project/*.scss', 'app/stylesheets/object/utility/*.scss' ] } }, sp: { files: { 'temp/sp.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/sp/*.scss', 'app/stylesheets/object/project/sp/*.scss', 'app/stylesheets/object/utility/sp/*.scss'
  • 90. The first draft ˑ of anything is shit قىؚٝؐؑ؎
  • 91. Thank you! ! github.com/hiloki " twitter.com/hiloki inkdesign.jp