CSS設計の理想と現実

CSS設計の理想と現実

1. 1. Hiroki Tani 2015.02.07CSS Nite LP39
2. 2. Frontend Developer, CSS Architect Hiroki Tani
3. 3. @cssradar @t32k @hiloki https://frontendweekly.tokyo/
4. 4. #1 #2 #3 #4 #5
5. 5. Vertical align
6. 6. .selector { property: value; }
7. 7. .selector { property: value; }
8. 8. “ ”Yuya Saito a.k.a. CSSRadar
9. 9. by Nicole Sullivan OOCSS
10. 10. http://codepen.io/hiloki/full/dnGeB
11. 11. <div class="speaker"> <div class="avatar"> <img src="tani.jpg"> </div> <div class="inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div>
12. 12. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .avatar { float: left; margin-right: 15px; } .speaker .avatar > img { border-radius: 50%; } .speaker .inner { overflow: hidden; } …
13. 13. <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>
14. 14. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
15. 15. <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>
16. 16. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
17. 17. <div class="media speaker"> <div class="image avatar"> <img src="tani.jpg"> </div> <div class="body inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div>
18. 18. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media > .image { float: left; } .media > .body { overflow: hidden; }
19. 19. <div class="media book"> <div class="image cover"> <img src="book.jpg"> </div> <div class="body inner"> <p class="title">...</p> <p class="info"> ... </p> <div class="intro"> <p>...</p> </div> <ul class="shop"> <li>...</li> </ul> </div> </div>
20. 20. <div class="media event"> <a href="event.html"> <div class="image thumbnail"> <img src="event.jpg"> </div> <div class="body inner"> <p class="event__name"> … </p> </div> </a> </div>
21. 21. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .avatar { float: left; margin-right: 15px; } .speaker .avatar > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } … .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .avatar { float: left; margin-right: 15px; } .speaker .avatar > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
22. 22. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
23. 23. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
24. 24. Rule of Three
25. 25. 3 , 6 , _ , _ , _ , …
26. 26. 3 , 6 , 9 , 12 , 15 , …
27. 27. 3 , 6 , 12 , 24 , 48 , …
28. 28. 3 , 6 , 9 , _ , _ , …
29. 29. 3 , 6 , 9 , 12 , 15 , …
30. 30. by Yandex BEM
31. 31. Hiroki Tani Hiroki Tani Block Element Modifier
32. 32. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; } .media__body { overflow: hidden; }
33. 33. <div class="media speaker"> <div class="media__image avatar"> <img src="tani.jpg"> </div> <div class="media__body inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div>
34. 34. <div class="media speaker"> <div class=" media__image speaker__avatar"> <img src="tani.jpg"> </div> <div class=" media__body speaker__inner"> <p class="speaker__name">…</p> <div class=" speaker__biography"> <p>...</p> </div> </div> </div>
35. 35. https://github.com/hiloki/flocss
36. 36. http://spotlight-media.jp/
37. 37. .grid { /* Clearfix code */ } .grid--4 .grid__cell { width: 25%; } .grid--5 .grid__cell { width: 20%; } .grid__cell { box-sizing: border-box; float: left; padding-left: 10px; padding-right: 10px; } @media (max-width: 640px) { .grid--4 .grid__cell, .grid--5 .grid__cell { width: 100%; } .grid__cell { float: none; } }
38. 38. @media (max-width: 640px) { .text-large, .text-huge { font-size: 18px; } } .text-large { font-size: 24px; } .text-huge { font-size: 48px; }
39. 39. .text-24 { font-size: 24px; } .text-48 { font-size: 48px; } ! @media (max-width: 640px) { .text-24, .text-48 { font-size: 18px; } }
40. 40. .orange { background-color: #f26522 }
41. 41. .orange { background-color: #6cc655 }
42. 42. .brand-color { background-color: #6cc655 }
43. 43. .speaker__book { padding: 20px; background-color: #E9EFE8; } .speaker__book__image { margin-right: 20px; } .speaker__book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .speaker__book__info { margin-bottom: 10px; font-size: 0.875em; color: #666; }
44. 44. .speaker__book { padding: 20px; background-color: #E9EFE8; } .speaker__bookImage { margin-right: 20px; } .speaker__bookName { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .speaker__bookInfo { margin-bottom: 10px; font-size: 0.875em; color: #666; }
45. 45. .book { padding: 20px; background-color: #E9EFE8; } .book__image { margin-right: 20px; } .book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .book__info { margin-bottom: 10px; font-size: 0.875em; color: #666; }
46. 46. <div class="media speaker"> <div class=" media__image speaker__avatar avatar"> <img src="tani.jpg"> </div> <div class=" media__body speaker__inner"> <p class="speaker__name">…</p> <div class=" speaker__biography"> <p>...</p> </div> </div> </div>
47. 47. Nicolas Gallagher, About HTML semantics and front-end architecture “ ”
48. 48. CSS Preprocessor
49. 49. %media { overflow: hidden; /* Clearfix */ } %media__image { float: left; margin-right: 15px; } %media__body { overflow: hidden; } ! %avatar { > img { border-radius: 50%; } }
50. 50. .speaker { @extend %media; } .speaker-avatar { @extend %media__image; @extend %avatar; }
51. 51. <div class="speaker"> <div class="speaker-avatar"> <img src="..."> </div> <div class="speaker-info"> <p class="speaker-name">...</p> <div class="speaker-bio"> <p>...</p> </div> </div> </div>
52. 52. .speaker { @extend %media; } .speaker-avatar { @extend %media__image; @extend %avatar; } ! .book { @extend %media; } ! .event { @extend %media; }
53. 53. %media .speaker .book .event
54. 54. %media .speaker .book .event .event { @extend .book; }
55. 55. %media .speaker .book .event .event { // error @extend .book; }
56. 56. rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background- color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius: 12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mo ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 u child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listTyp li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.m ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;bo sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text- 1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li
57. 57. rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background- color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius: 12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mo ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 u child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listTyp li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.m ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;bo sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text- 1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li 440kbgzinpped
58. 58. #1 #2 #3 #4 #5
59. 59. #1
60. 60. #main .feature h2 { border-bottom: 2px solid #F30; padding: 0.5em 0.2em; font-size: 1.2em; } ! #main .feature .body { padding: 0 1em; font-size: 1em; }
61. 61. #main .feature h2 { border-bottom: 2px solid #F30; padding: 0.5em 0.2em; font-size: 1.2em; } ! #main .feature .body { padding: 0 1em; font-size: 1em; }
62. 62. <div id="content"> <div id="main"> <div class="feature"> <h2>Heading</h2> <div class="body"> <p>Lorem ipsum...</p> </div> </div> </div> </div>
63. 63. #main .feature h2 { border-bottom: 2px solid #F30; padding: 0.5em 0.2em; font-size: 1.2em; ! ! ! } #content h2 { color: #F30 }  /* color color: #F30 */
64. 64. #2
65. 65. <div class="sidebar"> <nav class="nav"> <ul class="menu"> <li> <a>Menu Item</a> </li> ... <li> <ul class="sub-menu"> <li> <a>Sub Menu Item</a> </li> ... </ul> </li> </ul> </nav> </div>
66. 66. .sidebar .nav .menu li a { display: block; border-bottom: 1px solid #899; padding: 1em; } .sidebar .nav .menu .sub-menu { padding: 0.5em; background: #EEE; } .sidebar .nav .menu .sub-menu li a { border-bottom: 0; padding: 0.7em 1em; }
67. 67. .side-menu li a { display: block; border-bottom: 1px solid #899; padding: 1em; } .side-sub-menu { padding: 0.5em; background: #EEE; } .side-sub-menu li a { border-bottom: 0; padding: 0.7em 1em; }
68. 68. .side-menu > li > a { display: block; border-bottom: 1px solid #899; padding: 1em; } .side-sub-menu { padding: 0.5em; background: #EEE; } .side-sub-menu > li > a { border-bottom: 0; padding: 0.7em 1em; }
69. 69. .side-menu__item { display: block; border-bottom: 1px solid #899; padding: 1em; } .side-sub-menu { padding: 0.5em; background: #EEE; } .side-sub-menu__item { border-bottom: 0; padding: 0.7em 1em; }
70. 70. The Inception Rule
71. 71. http://csslint.net/
72. 72. https://github.com/gruntjs/grunt-contrib-csslint
73. 73. #3
74. 74. .book { padding: 20px; background-color: #E9EFE8; } .book__image { margin-right: 20px; } .book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .book__info { margin-bottom: 10px; font-size: 0.875em; color: #666; }
75. 75. .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
76. 76. .default-button { color: #333; background-color: #fff; border-color: #ccc; } .primary-button { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .info-button { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
77. 77. https://smacss.com/
78. 78. http://itcss.io/
79. 79. https://speakerdeck.com/dafed/managing-css-projects-with-itcss
80. 80. Setting Tools Generic Base Objects Components Trumps
81. 81. $color-ui: #BADA55; $spacing-unit: 10px; $type-brand: "UI Font";
82. 82. @mixin font-brand() { font-family: $type-brand; font-weight: 400; }
83. 83. * { box-sizing: border-box; }
84. 84. ul { list-style: square; }
85. 85. .ul-list { margin: 0; padding: 0; list-style: none; } .ul-list__item { padding: $spacing-unit; }
86. 86. .products-list { @include font-brand; background: $color-ui; } .products-list__item { padding: $spacing-unit; color: #FFF; }
87. 87. .one-half { width: 50% !important; }
88. 88. "## _base.links.scss "## _base.page.scss "## _base.quotes.scss "## _base.type.scss "## _components.ads.scss "## ... "## _components.promo.scss "## _components.pull-quote.scss "## _objects.wrappers.scss "## _settings.colors.scss "## _settings.global.scss "## _tools.aliases.scss "## _tools.mixins.scss "## _trumps.show-hide.scss "## _trumps.widths-responsive.scss $## csswizardry.scss https://github.com/csswizardry/csswizardry.github.com/
89. 89. /** * #SETTINGS */ @import "bower_components/inuit-defaults/settings.defaults"; @import "settings.global"; @import "settings.colors"; @import "bower_components/inuit-responsive-settings/settings.responsive"; ! /** * #TOOLS */ @import "bower_components/inuit-functions/tools.functions"; @import "bower_components/inuit-mixins/tools.mixins"; @import "tools.mixins"; @import "bower_components/inuit-responsive-tools/tools.responsive"; @import "tools.aliases"; ! /** * #GENERIC */ @import "bower_components/inuit-normalize/generic.normalize"; @import "bower_components/inuit-reset/generic.reset"; @import "bower_components/inuit-box-sizing/generic.box-sizing"; @import "bower_components/inuit-shared/generic.shared"; !
90. 90. .box-a { margin: 10px; border-radius: 6px; background-color: rgba(239,206,130); } .box-b { margin: 15px; border-radius: 3px; background-color: rgba(201,173,109); } ! .ball-a { margin: 15px 20px; border-radius: 100%; background-color: rgba(239,129,128); } .ball-b { margin: 12px 24px; border-radius: 80%; background-color: rgba(186,99,100); }
91. 91. .box-a { margin: 15px; border-radius: 6px; background-color: rgba(239,206,130); } .box-b { margin: 10px; border-radius: 6px; background-color: rgba(239,206,130); } ! .ball-a { margin: 15px 20px; border-radius: 100%; background-color: rgba(239,129,128); } .ball-b { margin: 15px; border-radius: 100%; background-color: rgba(239,129,128); }
92. 92. .box { border-radius: 6px; background-color: rgba(239,206,130); } .box-a { margin: 15px; } .box-b { margin: 10px; } ! .ball { border-radius: 100%; background-color: rgba(239,129,128); } .ball-a { margin: 15px 20px; } .ball-b { margin: 15px; }
93. 93. http://rizzo.lonelyplanet.com/styleguide/
94. 94. http://www.stylestats.org/
95. 95. Rule of Three
96. 96. Rule of Three
97. 97. <ul class="ranking"> <li class="ranking__item"> <img class="ranking__image"> <p class="ranking__name"> ... </p> </li> ... </ul>
98. 98. .ranking__item { counter-increment : rank; ... } .ranking__item:before { display: inline-block; content: counter(rank); ... } .ranking__item:nth-child(1):before { background-color: #ffd700; } .ranking__item:nth-child(2):before { background-color: #C0C0C0; } .ranking__item:nth-child(3):before { background-color: #C87533; }
99. 99. <ul class="ranking"> <li class="ranking__item"> <span class=" ranking__rank ranking__rank—1">1</span> <img class="ranking__image"> <p class="ranking__name"> ... </p> </li> ... </ul>
100. 100. .ranking__item { counter-increment : rank; ... } .ranking__rank { display: inline-block; content: counter(rank); ... } .ranking__rank--1 { background-color: #ffd700; } .ranking__rank--2 { background-color: #C0C0C0; } .ranking__rank--3 { background-color: #C87533; }
101. 101. The first draft of anything is shit. Ernest Hemingway “ ”
102. 102. Christopher Alexandar, A pattern language “ ”
103. 103. twitter.com/hiloki Thanks github.com/hiloki