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

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

2. Hiroki Tani
@hiloki, Frontend Developer

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

6. Vertical align

9. .selector {
property: value;
}

10. .selector {
property: value;
}

11. .author {
…
}
Hiroki Tani

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 { ... }

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

16. OOCSS
by Nicole Sullivan
https://www.flickr.com/photos/premshree/3444104640/

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

22. https://bem.info/

23. Hiroki Tani
Hiroki Tani
Block
Element
Modifier

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... */ }

40. %Media
.author .login-user

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

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

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

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

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

47. https://amcss.github.io/

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

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

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

53. http://smacss.com/

54. https://github.com/hiloki/flocss

55. ITCSS
by Harry Roberts a.k.a. CSS Wizardly
https://www.flickr.com/photos/stn1978/8899794454/

56. http://itcss.io/

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

58. Setting
Tools
Generic
Base
Objects
Components
Trumps

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

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

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

69. Styleguide
Static

70. Styleguide
Living
Generator

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

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>
```
*/

74. http://bradfrost.com/
See also:
Pattern Lab
Frontnote
http://patternlab.io/
http://frontainer.com/frontnote/

75. Specificity Graph

76. http://csswizardry.com/2014/10/the-specificity-graph/

77. Specificity
Location in Stylesheet

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

91. http://www.stylestats.org/

92. http://cssstats.com

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

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

96. http://goo.gl/ycf4WU

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

100. http://www.smashingmagazine.com/

103. http://jonassebastianohlsson.com/criticalpathcssgenerator/

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

105. http://bradfrost.com/
See also:
Pentohouse
Critical
Critical CSS
https://github.com/pocketjoso/penthouse
https://github.com/addyosmani/critical
https://github.com/filamentgroup/criticalcss

107. http://webcomponents.org/

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

109. https://www.flickr.com/photos/pgoyette/5911926699/
Thanks
twitter.com/hiloki
github.com/hiloki