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