Beyond CSS Architecture
79 likes11,218 views
The document is a slideshow presentation about CSS architecture techniques. It discusses object-oriented CSS (OOCSS), block element modifier (BEM), CSS preprocessor extensions of BEM, responsive design patterns, style guide generators, specificity graphs, critical path CSS extraction, and the potential of web components. The presentation emphasizes building modular, reusable CSS components and establishing consistent CSS methodologies and architectures.
![[am-Button] {
...
}
[am-Button~="primary"] {
...
}
[am-Button~="large"] {
...
}](https://image.slidesharecdn.com/beyond-css-architecture-150125082703-conversion-gate02/85/Beyond-CSS-Architecture-49-320.jpg)
Beyond CSS Architecture
- 1. https://www.flickr.com/photos/stn1978/8899794454/ Beyond CSS Architecture Hiroki Tani, HTML5 Conference, Room B
- 2. Hiroki Tani @hiloki, Frontend Developer
- 12. .author { ... } .login-user { ... } Hiroki Tani Koji Ishimoto
- 13. .author { ... } .login-user { ... } .comment-author { ... }
- 14. .author, .login-user, .comment-author { /* 共通のスタイル */ } .author { ... } .login-user { ... } .comment-author { ... }
- 17. .media { ... } .author { ... } .login-user { ... } Hiroki Tani Koji Ishimoto
- 18. .media { overflow: hidden; /* Clearfix */ margin:10px; } .media .bd { overflow:hidden; } .media .img { float:left; margin-right: 10px; } .media .img img { display:block; } .media .imgExt { float:right; margin-left: 10px; }
- 19. <div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div> </div>
- 20. <div class="media author"> ... </div> <div class=“media login-user"> ... </div>
- 21. BEM by Yandex
- 24. .media { overflow: hidden; margin:10px; } .media .bd { overflow:hidden; } .media .img { float:left; margin-right: 10px; } .media .img img { display:block; } .media .imgExt { float:right; margin-left: 10px; }
- 25. .media { overflow: hidden; margin:10px; } .media__body { overflow:hidden; } .media__image { float:left; margin-right: 10px; } .media__image img { display:block; } .media__image_extra { float:right; margin-left: 10px; }
- 26. <div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div> </div>
- 27. <div class=“media author"> <a class="media__image"> <img /> </a> <div class="media__body"> ... </div> </div>
- 28. .media { /* 0,0,1,0 */ overflow: hidden; margin:10px; } .media__body { /* 0,0,1,0 */ overflow:hidden; } .media__image { /* 0,0,1,0 */ float:left; margin-right: 10px; } .media__image img { /* 0,0,1,1 */ display:block; } .media__image_extra { /* 0,0,1,0 */ float:right; margin-left: 10px; }
- 29. <div class="media author"> <a class="media__image author__image"> <img /> </a> <div class="media__body"> ... </div> </div>
- 31. “ ”Not all semantics need to be content-derived. Class names cannot be “unsemantic”. Whatever names are being used: they have meaning, they have purpose. Nicolas Gallagher http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
- 32. CSS Preprocessor
- 33. <div class="author Media"> <div class="author__image Media__image Avatar"> <img src="author.jpg"> </div> <div class="author__body Media__body"> ... </div> </div>
- 34. %Media { /* Media styles... */ } %Media__image { /* Media image styles... */ } %Media__body { /* Media body styles... */ } %Avatar { /* Avatar styles... */ }
- 35. .author { @extend %Media; /* .author styles... */ } .author-image { @extend %Media__image; @extend %Avatar; /* .author-image styles... */ } .author-body { @extend %Media__body; /* .author-body styles... */ }
- 36. <div class="author Media"> <div class="author-image Media__image Avatar"> <img src="author.jpg"> </div> <div class="author-body Media__body"> ... </div> </div>
- 37. .login-user { @extend %Media; /* .login-user styles... */ } .login-user-image { @extend %Media__image; @extend %Avatar; /* .login-user-image styles... */ } .login-user-body { @extend %Media__body; /* .login-user-body styles... */ }
- 38. <div class="login-user"> <div class="login-user-image"> <img src="user.jpg"> </div> <p class="login-user-name"> ... </p> </div>
- 39. .author, .login-user { /* Media styles... */ } .author-image, .login-user-image { /* Media image styles... */ } .author-body, .login-user-body { /* Media body styles... */ } .author-image, .login-user-image { /* Avatar styles... */ } .author { /* .author styles... */ } .author-image { /* .author-image styles... */ } .author-body { /* .author-body styles... */ } .login-user { /* .login-user styles... */ } .login-user-image { /* .login-user-image styles... */ } .login-user-body { /* .login-user-body styles... */ }
- 41. %Media .author .login-user { @extend .author; }
- 45. .mod_listType1 section,.mod_listType3 section,.mod_listType4 section,.mod_listType5 section,.mod_listType7 section,.mod_listType8 section{margin-bottom:1em}.mod_listType1 h1,.mod_listType3 h1,.mod_listType4 h1,.mod_listType5 h1,.mod_listType7 h1,.mod_listType8 h1{margin:0 0 .5em .5em;font-size:15px;-webkit-text-shadow:0 1px 0 rgba(255,255,255,.75);text-shadow:0 1px 0 rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType4 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,.mod_listType5 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 ul li:first-child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType3 ul li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod_listType4 ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul
- 46. .mod_listType1 section,.mod_listType3 section,.mod_listType4 section,.mod_listType5 section,.mod_listType7 section,.mod_listType8 section{margin-bottom:1em}.mod_listType1 h1,.mod_listType3 h1,.mod_listType4 h1,.mod_listType5 h1,.mod_listType7 h1,.mod_listType8 h1{margin:0 0 .5em .5em;font-size:15px;-webkit-text-shadow:0 1px 0 rgba(255,255,255,.75);text-shadow:0 1px 0 rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType4 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,.mod_listType5 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 ul li:first-child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType3 ul li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod_listType4 ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul 440kbgziped
- 48. <!-- class --> <a class="btn btn-primary btn-lg"> Large primary button </a> <!-- attribute --> <a am-Button="primary large"> Large primary button </a>
- 50. See also: CSS: Using every declaration just once YACP https://developers.google.com/speed/articles/optimizing-css http://morishitter.hatenablog.com/entry/2014/12/02/000135 http://hail2u.net/blog/webdesign/oocss-drawbacks-and-gifts-of-every-declaration-just-once.html
- 52. “ ”We’re not designing pages, we’re designing systems of components. Stephen Hay
- 55. ITCSS by Harry Roberts a.k.a. CSS Wizardly https://www.flickr.com/photos/stn1978/8899794454/
- 59. !"" _base.links.scss !"" _base.page.scss !"" _base.quotes.scss !"" _base.type.scss !"" _components.ads.scss !"" ... !"" _components.promo.scss !"" _components.pull-quote.scss !"" _components.site-nav.scss !"" _components.sprites.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
- 60. /** * #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";
- 63. http://bradfrost.com/ See also: Atomic Design FUN CSS http://bradfrost.com/blog/post/atomic-web-design/ http://benfrain.com/fun-css-naming-convention-explained/
- 65. Styleguide
- 72. /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
- 73. /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
- 78. Specificity Location in Stylesheet ul { margin: 0; }
- 79. Specificity Location in Stylesheet .item { border: 1px solid #999; }
- 80. Specificity Location in Stylesheet .item.selected { background: #eee; }
- 81. Specificity Location in Stylesheet .heading { font-size: 24px; }
- 82. Specificity Location in Stylesheet #feature { background: #FC0; }
- 83. Specificity Location in Stylesheet #feature .heading { color: #000; }
- 84. http://jonassebastianohlsson.com/specificity-graph/
- 89. See also: Specificity graph CSS specificity graphs http://snook.ca/archives/html_and_css/specificity-graphs https://decadecity.net/blog/2014/11/26/css-specificity-graphs
- 90. Statistical tool
- 108. “ ”Every line of CSS you write is a suggestion. Jeremy Keith https://adactio.com/journal/7653