1. 1. 2017: A CSS Design Odyssey KenjiroKubota
2. 2.
3. 3. CSSCSS CSS
4. 4. A Long Past
5. 5. html css #btn-main { width: 100px; height: 40px; background-color: red; } #btn-sub { width: 100px; height: 40px; background-color: blue; }
6. 6. ID HTMLCSS
7. 7. HTMLCSS
8. 8. OOCSS Object Oriented CSS
9. 9. OOCSS 2009 - Yahoo!Nicole Sullivan Twitter Bootstrap
10. 10. CSS is too fragile Nicole Sullivan
11. 11. .selector { ... }
12. 12. ()() ()()
13. 13. html css .btn { width: 100px; height: 40px; } .btn-red { background-color: red; } .btn-blue { background-color: blue; }
14. 14. OOCSS HTML
15. 15. Past
16. 16. OOCSS
17. 17. HTML CSS
18. 18. BEM Block Element Modi er
19. 19. BEM 2012~13 - Yandex
20. 20. Block - Element - Block Modi er - Block,Element
21. 21. MindBEMding
22. 22. MindBEMding BEMCSS ElementModi er BEM BEM .Block__Element--Modi er
23. 23. html
    • Tab1
    • Tab2
    • Tab3
    • Tab4
24. 24. css .main-tab { ... } .main-tab__button { ... } .main-tab__button--active { ... }
25. 25. scss .main-tab { ... &__button { ... &--active { ... } } } Blockmain-tab.scss
26. 26. MindBEMding
27. 27. Rule .widget_list / .widget__list
28. 28. BEM
29. 29. MCSS Multilayer CSS
30. 30. MCSS 2012~3 - OOCSS, BEM SNS
31. 31.
32. 32. Layer 0. Foundation 1. Base 2. Project 3. Cosmetic
33. 33. 0: Foundation CSS CSSCSS
34. 34. 1: Base MCSS
35. 35. 2: Project CSS
36. 36. 3: Cosmetic OOCSS
37. 37. Layer() 0. Foundation (reset, normalize) 1. Base (OOCSS) 2. Project (BEM) 3. Cosmetic (OOCSS) OOCSSBEM
38. 38. SMACSS Scalable and Modular Architecture for CSS
39. 39. SMACSS 2013- CSS CSS
40. 40. CSS Base - Layout - Module - State - Theme -
41. 41. Base Rule ID CSS ( body , a ) ( input[type=text] ) ( a:hover ) ()
42. 42. Layout Rule .l- , .layout- IDCSSSMACSS
43. 43. .l-main { width: 70%; } .l-fixed .l-main { width: 600px; } .l-fixed px%
44. 44. Module Rule
45. 45. ID li , a ... ()
46. 46. State Rule Javascript true .is- / .is-hidden .is-error .is-active
47. 47. Theme Rule main.css .mod { border: 1px solid; } theme.css .mod { border-color: blue; }
48. 48. .theme- .theme-border { border-color: purple; } .theme-background { background: linear-gradient( ... ); }
49. 49. MCSS
50. 50.
51. 51. CSS https://www.w3.org/TR/selectors/#speci city
52. 52. CSS (MDN)
53. 53. speci city
54. 54. (*) () ([type="text"], [href="#"]) (:after, :nth-child) ID
55. 55. !important :not :not
56. 56. Question html css #hoge #fuga { color: red; } #hoge .piyo1.piyo2.piyo3 { color: blue; }
57. 57.
58. 58. CSS id !important
59. 59. FLOCSS Foundation Layout Object CSS
60. 60. FLOCSS 2014 - CSS OOCSS, SMACSS, BEM, SuitCSSMCSS CSS
61. 61. FLOCSSObject Foundation Layout Object Component Project Utility
62. 62. Foundation Reset.cssNormalize.css
63. 63. Layout Layout ID ID l-* [id="header"]
64. 64. Object OOCSS Object FLOCSSObject3
65. 65. Component Project Component Utility ComponentProjectObject
66. 66. MindBEMding SMACSSState .is- Object Component - .c-* Project - .p-* Utility - .u-*
67. 67. foundation layout object component project utility
68. 68. CSS
69. 69. RSCSS Reasonable System for CSS
70. 70. RSCSS 2015 - CSS 5 Components Elements Variants Layouts Helpers
71. 71. Components
72. 72. Component Like .like-button .search-form .article-card
73. 73. Elements Component
74. 74. ComponentElementElement 1 .search-form { > .field { /* ... */ } > .action { /* ... */ } }
75. 75. Element > Component
76. 76. Variants ComponentElementvariant
77. 77. variant .like-buttoon { &.-wide { /* ... */ } &.-short { /* ... */ } &.-disabled { /* ... */ } }
78. 78. Elementvariant Elementvariant .shopping-card { > .title { /* ... */ } > .title.-small { /* ... */ } }
79. 79. Layouts
80. 80. Component Positioning (position, top, left, right, bottom) Floats ( oat, clear) Margins (margin) Dimensions (width, height) *
81. 81. .article-list { & { @include clearfix; } > .article-card { width: 33.3%; float: left; } } .article-card { & { /* ... */ } > .image { /* ... */ } > .title { /* ... */ } > .category { /* ... */ } }
82. 82. Helpers ._unmargin { margin: 0 !important; } ._center { text-align: center !important; } ._pull-left { float: left !important; } ._pull-right { float: right !important; } !important
83. 83. Hepler helpers helper
84. 84. CSS Structure Component Use glob matching @import 'components/*'; /* Better: 2 levels */ .image-frame { > .description { /* ... */ } > .description > .icon { /* ... */ } }
85. 85. Atomic Design
86. 86. ESCC Enduring CSS
87. 87. ECSS 2015 - bet365.com Enduring = OOCSS
88. 88. DRYDecoupling
89. 89. ECSS CSS {} DRYDRY OOCSS DRY DRY
90. 90. namespace - Module - Component - Module ChildNode - Component variant - Module
91. 91. ECSSBEM Module,Component === Block ChildNode === Element variant === Modi re ECSSAtomicDesign Module === Organisms Component === Molecules
92. 92. namespace-ModuleName_ChildNode-variant namespace-ComponentName_ChildNode-variant namespace Module modulename-ComponentName_ChildNode-variant namespacevariant
93. 93. (namespace) ECSS TopPage .tp- CategoryTop .ct- ShoppingCart .sc-
94. 94. Structure .st- SideWide .sw- Layout .layout-
95. 95. () css font/ base/ variable/ function/ mixin/ _normalize.scss _base.scss _Icon.scss SiteWide/ Structure/ namespace/ layout/ news/ product/ results/ search/ sitemap/ site.scss
96. 96. Module WAI-ARIA() aria-selected="true" aria-disabled="true" aria-hidden="true" aria-expanded="true" aria-busy="true" WAI-ARIAvariant .co-Button-selected
97. 97. ECSS 1 "Single Source of truth" 2 3 ID 4 5 z-index 6 max-width 7 mixinextend 8 9 10 CSS
98. 98.
99. 99. SMACSS, FLOCSS ECSS OOCSS READMEXXCSS
100. 100. thanks;)