Successfully reported this slideshow.

Beyond CSS Architecture

79

Share

Loading in …3
×
1 of 109
1 of 109

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Beyond CSS Architecture

  1. 1. https://www.flickr.com/photos/stn1978/8899794454/ Beyond CSS Architecture Hiroki Tani, HTML5 Conference, Room B
  2. 2. Hiroki Tani @hiloki, Frontend Developer
  3. 3. https://frontendweekly.tokyo/ @cssradar @t32k @hiloki
  4. 4. Vertical align
  5. 5. .selector { property: value; }
  6. 6. .selector { property: value; }
  7. 7. .author { … } Hiroki Tani
  8. 8. .author { ... } .login-user { ... } Hiroki Tani Koji Ishimoto
  9. 9. .author { ... } .login-user { ... } .comment-author { ... }
  10. 10. .author, .login-user, .comment-author { /* 共通のスタイル */ } .author { ... } .login-user { ... } .comment-author { ... }
  11. 11. .author, .login-user, .comment-author, .entry-item, .bookmark, .more-uis… { ... }
  12. 12. OOCSS by Nicole Sullivan https://www.flickr.com/photos/premshree/3444104640/
  13. 13. .media { ... } .author { ... } .login-user { ... } Hiroki Tani Koji Ishimoto
  14. 14. .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; }
  15. 15. <div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div> </div>
  16. 16. <div class="media author"> ... </div> <div class=“media login-user"> ... </div>
  17. 17. BEM by Yandex
  18. 18. https://bem.info/
  19. 19. Hiroki Tani Hiroki Tani Block Element Modifier
  20. 20. .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; }
  21. 21. .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; }
  22. 22. <div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div> </div>
  23. 23. <div class=“media author"> <a class="media__image"> <img /> </a> <div class="media__body"> ... </div> </div>
  24. 24. .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; }
  25. 25. <div class="media author"> <a class="media__image author__image"> <img /> </a> <div class="media__body"> ... </div> </div>
  26. 26. “ ”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/
  27. 27. CSS Preprocessor
  28. 28. <div class="author Media"> <div class="author__image Media__image Avatar"> <img src="author.jpg"> </div> <div class="author__body Media__body"> ... </div> </div>
  29. 29. %Media { /* Media styles... */ } %Media__image { /* Media image styles... */ } %Media__body { /* Media body styles... */ } %Avatar { /* Avatar styles... */ }
  30. 30. .author { @extend %Media; /* .author styles... */ } .author-image { @extend %Media__image; @extend %Avatar; /* .author-image styles... */ } .author-body { @extend %Media__body; /* .author-body styles... */ }
  31. 31. <div class="author Media"> <div class="author-image Media__image Avatar"> <img src="author.jpg"> </div> <div class="author-body Media__body"> ... </div> </div>
  32. 32. .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... */ }
  33. 33. <div class="login-user"> <div class="login-user-image"> <img src="user.jpg"> </div> <p class="login-user-name"> ... </p> </div>
  34. 34. .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... */ }
  35. 35. %Media .author .login-user
  36. 36. %Media .author .login-user { @extend .author; }
  37. 37. %Media .author .login-user .comment-author .entry-item .bookmark .more-uis
  38. 38. %Media .author .login-user .comment-author .entry-item .bookmark .more-uis
  39. 39. %Media .author .login-user .comment-author .entry-item .bookmark .more-uis
  40. 40. .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
  41. 41. .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
  42. 42. https://amcss.github.io/
  43. 43. <!-- class --> <a class="btn btn-primary btn-lg"> Large primary button </a> <!-- attribute --> <a am-Button="primary large"> Large primary button </a>
  44. 44. [am-Button] { ... } [am-Button~="primary"] { ... } [am-Button~="large"] { ... }
  45. 45. 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
  46. 46. “ ”We’re not designing pages, we’re designing systems of components. Stephen Hay
  47. 47. http://smacss.com/
  48. 48. https://github.com/hiloki/flocss
  49. 49. ITCSS by Harry Roberts a.k.a. CSS Wizardly https://www.flickr.com/photos/stn1978/8899794454/
  50. 50. http://itcss.io/
  51. 51. https://speakerdeck.com/dafed/managing-css-projects-with-itcss
  52. 52. Setting Tools Generic Base Objects Components Trumps
  53. 53. !"" _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
  54. 54. /** * #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";
  55. 55. 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/
  56. 56. Styleguide
  57. 57. http://ux.mailchimp.com/patterns/
  58. 58. http://styleguides.io/examples.html
  59. 59. Styleguide Static
  60. 60. Styleguide Living Generator
  61. 61. http://trulia.github.io/hologram/
  62. 62. /*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> ``` */
  63. 63. /*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> ``` */
  64. 64. http://bradfrost.com/ See also: Pattern Lab Frontnote http://patternlab.io/ http://frontainer.com/frontnote/
  65. 65. Specificity Graph
  66. 66. http://csswizardry.com/2014/10/the-specificity-graph/
  67. 67. Specificity Location in Stylesheet
  68. 68. Specificity Location in Stylesheet ul { margin: 0; }
  69. 69. Specificity Location in Stylesheet .item { border: 1px solid #999; }
  70. 70. Specificity Location in Stylesheet .item.selected { background: #eee; }
  71. 71. Specificity Location in Stylesheet .heading { font-size: 24px; }
  72. 72. Specificity Location in Stylesheet #feature { background: #FC0; }
  73. 73. Specificity Location in Stylesheet #feature .heading { color: #000; }
  74. 74. http://jonassebastianohlsson.com/specificity-graph/
  75. 75. 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
  76. 76. Statistical tool
  77. 77. http://www.stylestats.org/
  78. 78. http://cssstats.com
  79. 79. See also: CSS Dig Parker http://cssdig.com/ https://github.com/katiefenn/parker
  80. 80. https://developers.google.com/web/fundamentals/performance/critical-rendering-path
  81. 81. http://goo.gl/ycf4WU
  82. 82. https://developers.google.com/speed/pagespeed/insights/
  83. 83. http://www.smashingmagazine.com/
  84. 84. http://jonassebastianohlsson.com/criticalpathcssgenerator/
  85. 85. Before After http://goo.gl/9DbbVs
  86. 86. http://bradfrost.com/ See also: Pentohouse Critical Critical CSS https://github.com/pocketjoso/penthouse https://github.com/addyosmani/critical https://github.com/filamentgroup/criticalcss
  87. 87. http://webcomponents.org/
  88. 88. “ ”Every line of CSS you write is a suggestion. Jeremy Keith https://adactio.com/journal/7653
  89. 89. https://www.flickr.com/photos/pgoyette/5911926699/ Thanks twitter.com/hiloki github.com/hiloki

×