Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond CSS Architecture

9,650 views

Published on

2015年1月25日 東京
「HTML5 Conference 」での講演スライドです。

Published in: Software, Design
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×