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

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

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 ㄏせ鋉⵱׾䭯א

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

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 ؕآُ،ٕזطأز

83. .c-button--primary { $primaryColor: #F31; background-color: $primaryColor; &:hover { background-color: mix($primaryColor,#FFF,80%); } }

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

SlideShare for iOS

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

by 拓樹谷 , Webデベロッパー at 株式会社サイバーエージェント

on Nov 08, 2014

Statistics

Views

Actions

2 Embeds 17

Accessibility

Categories

Upload Details

Usage Rights

Report content