Beyond CSS Architecture

1. https://www.ﬂickr.com/photos/stn1978/8899794454/ Beyond CSS Architecture Hiroki Tani, HTML5 Conference, Room B

2. Hiroki Tani @hiloki, Frontend Developer

3. https://frontendweekly.tokyo/ @cssradar @t32k @hiloki

4. Vertical align

5. .selector { property: value; }

6. .selector { property: value; }

7. .author { … } Hiroki Tani

8. .author { ... } .login-user { ... } Hiroki Tani Koji Ishimoto

9. .author { ... } .login-user { ... } .comment-author { ... }

10. .author, .login-user, .comment-author { /* 共通のスタイル */ } .author { ... } .login-user { ... } .comment-author { ... }

11. .author, .login-user, .comment-author, .entry-item, .bookmark, .more-uis… { ... }

12. OOCSS by Nicole Sullivan https://www.ﬂickr.com/photos/premshree/3444104640/

13. .media { ... } .author { ... } .login-user { ... } Hiroki Tani Koji Ishimoto

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. <div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div> </div>

16. <div class="media author"> ... </div> <div class=“media login-user"> ... </div>

17. BEM by Yandex

18. https://bem.info/

19. Hiroki Tani Hiroki Tani Block Element Modifier

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. .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. <div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div> </div>

23. <div class=“media author"> <a class="media__image"> <img /> </a> <div class="media__body"> ... </div> </div>

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. <div class="media author"> <a class="media__image author__image"> <img /> </a> <div class="media__body"> ... </div> </div>

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. CSS Preprocessor

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. %Media { /* Media styles... */ } %Media__image { /* Media image styles... */ } %Media__body { /* Media body styles... */ } %Avatar { /* Avatar styles... */ }

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. <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. .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. <div class="login-user"> <div class="login-user-image"> <img src="user.jpg"> </div> <p class="login-user-name"> ... </p> </div>

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. %Media .author .login-user

36. %Media .author .login-user { @extend .author; }

37. %Media .author .login-user .comment-author .entry-item .bookmark .more-uis

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. .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. https://amcss.github.io/

43.  <a class="btn btn-primary btn-lg"> Large primary button </a>  <a am-Button="primary large"> Large primary button </a>

44. [am-Button] { ... } [am-Button~="primary"] { ... } [am-Button~="large"] { ... }

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. “ ”We’re not designing pages, we’re designing systems of components. Stephen Hay

47. http://smacss.com/

48. https://github.com/hiloki/ﬂocss

49. ITCSS by Harry Roberts a.k.a. CSS Wizardly https://www.ﬂickr.com/photos/stn1978/8899794454/

50. http://itcss.io/

51. https://speakerdeck.com/dafed/managing-css-projects-with-itcss

52. Setting Tools Generic Base Objects Components Trumps

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. /** * #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. 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. Styleguide

57. http://ux.mailchimp.com/patterns/

58. http://styleguides.io/examples.html

59. Styleguide Static

60. Styleguide Living Generator

61. http://trulia.github.io/hologram/

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. /*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. http://bradfrost.com/ See also: Pattern Lab Frontnote http://patternlab.io/ http://frontainer.com/frontnote/

65. Specificity Graph

66. http://csswizardry.com/2014/10/the-speciﬁcity-graph/

67. Specificity Location in Stylesheet

68. Specificity Location in Stylesheet ul { margin: 0; }

69. Specificity Location in Stylesheet .item { border: 1px solid #999; }

70. Specificity Location in Stylesheet .item.selected { background: #eee; }

71. Specificity Location in Stylesheet .heading { font-size: 24px; }

72. Specificity Location in Stylesheet #feature { background: #FC0; }

73. Specificity Location in Stylesheet #feature .heading { color: #000; }

74. http://jonassebastianohlsson.com/speciﬁcity-graph/

75. See also: Specificity graph CSS specificity graphs http://snook.ca/archives/html_and_css/speciﬁcity-graphs https://decadecity.net/blog/2014/11/26/css-speciﬁcity-graphs

76. Statistical tool

77. http://www.stylestats.org/

78. http://cssstats.com

79. See also: CSS Dig Parker http://cssdig.com/ https://github.com/katiefenn/parker

80. https://developers.google.com/web/fundamentals/performance/critical-rendering-path

81. http://goo.gl/ycf4WU

82. https://developers.google.com/speed/pagespeed/insights/

83. http://www.smashingmagazine.com/

84. http://jonassebastianohlsson.com/criticalpathcssgenerator/

85. Before After http://goo.gl/9DbbVs

86. http://bradfrost.com/ See also: Pentohouse Critical Critical CSS https://github.com/pocketjoso/penthouse https://github.com/addyosmani/critical https://github.com/ﬁlamentgroup/criticalcss

87. http://webcomponents.org/

88. “ ”Every line of CSS you write is a suggestion. Jeremy Keith https://adactio.com/journal/7653

89. https://www.ﬂickr.com/photos/pgoyette/5911926699/ Thanks twitter.com/hiloki github.com/hiloki

Beyond CSS Architecture

拓樹谷

Views

Actions

Embeds 0

Report content

Transcript

Beyond CSS Architecture

拓樹 谷

Views

Actions

Embeds 0

Report content

Transcript

拓樹谷