1.
なんでCSS
すぐ死んでしまうん
Frontrend in Kanazawa
https://www.flickr.com/photos/tveskov/3387394098

2.
@pocotan001
Hayato Mizuno

3.
@大阪
http://peatix.com/event/55901

4.
BIG CSS
https://www.youtube.com/watch?v=R-BX4N8egEc
https://www.flickr.com/photos/nickpiggott/5212359135

5.
“CSSはその単純さゆえに、
大規模な実装では管理が難しい。
BIG CSS
“CSS, for all its simplicity, is a difficult language to manage in
large-scale implementations. ”
- MVCSS / Overview
https://www.youtube.com/http://watch?mvcss.v=github.R-BX4N8egEc
io/
https://www.flickr.com/photos/nickpiggott/5212359135

6.
簡単なシンタックス ≠ 簡単な言語
! 異なるバージョンとブラウザベンダーへの依存
! ネームスペースの問題
! 紳士協定だけでルBIG ールをCSS
制限する難しさ
! …
https://www.youtube.com/watch?v=R-BX4N8egEc
https://www.flickr.com/photos/nickpiggott/5212359135

7.
http://p.twipple.jp/qk9sw

8.
http://p.twipple.jp/qk9sw
div {
background: pink;
}

9.
望ましい設計のゴール
https://www.flickr.com/photos/nickpiggott/5212959770/in/photostream/

10.
メンテナンス
60%
開発
40%
http://d.hatena.ne.jp/asakichy/20120420/1334872770

11.
メンテナンス
60%
開発
40%
要件変更
60%
移行
23%
バグ修正
17%
http://d.hatena.ne.jp/asakichy/20120420/1334872770

12.
メンテナンス
60%
開発
40%
コードを
理解する時間
30%
http://d.hatena.ne.jp/asakichy/20120420/1334872770

13.
良いCSS設計のゴール
メンテナンス
60%
開発
40%
コードを
理解する時間
30%
http://article.enja.io/articles/css-architecture.html
http://d.hatena.ne.jp/asakichy/20120420/1334872770
! 予測しやすい
! 再利用しやすい
! 保守しやすい
! 拡張しやすい

14.
http://goo.gl/OnnMm

15.
http://goo.gl/OnnMm
設計はルーズなプロセスである
! 問題を解決することで新たな問題を生む
! うまくいくかどうかは試してみないとわからない
! 要件が変われば設計も変わる（かもしれない）

16.
メソドロジーとルール
https://www.flickr.com/photos/bdesham/2432400623

17.
“我々はページをデザインしているの
ではない、コンポーネントのシステ
ムをデザインしているのだ。
“We're not designing pages, we're designing systems of components. ”
- Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

18.
http://styletil.es/

19.
http://sparkbox.github.io/style-prototype/

20.
http://medialoot.com/item/free-flat-ui-design-kit/

21.
http://getbootstrap.com/

22.
https://www.polymer-project.org/

23.
https://www.flihctktpr.c:/o/cmo/dpehpoetons.io/la/peoncuolfetaann0/50914/f3u1ll/3E2tq2r9c6/

24.
<paper-button label="button">
</paper-button>
!
<paper-button label="button"
raisedButton>
</paper-button>
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button

25.
<paper-button label="button">
</paper-button>
!
<paper-button label="button"
raisedButton>
</paper-button>
Visual Non-visual
! <core-icon>
! <core-list>
! <core-overlay>
! …
! <core-ajax>
! <core-media-query>
! <core-localstorage>
! …
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button

26.
https:/h/wttwpsw:/./flwicwkrw.c.opmol/ypmheort-opsr/olajeecnt.uolfrega/nto/o5l9s4/d3e1s3ig2n2e9r6/

27.
https://www.flickr.com/photohst/tlape:/n/cuulfesatonm/5e9le4m31e3n2ts2.9io6/

28.
http://www.bestpsdfreebies.com/freebie/appz-psd-theme/

29.
再利用可能な
チャンクに分離する
- OOCSS -
https://github.com/stubbornella/oocss/wiki

30.
.button { ... }
!
.panel { ... }

31.
付加要素は
Modifierで拡張する

32.
HTML
<a class="button">Download</a>
CSS
.button { ... }
!

33.
HTML
<a class="button">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.button-large {
font-size: 24px;
}

34.
HTML
<a class="button button-raised">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.button-large {
font-size: 24px;
}

35.
HTML
<a class="button button-large">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.button-large {
font-size: 24px;
}

36.
.panel { ... }

37.
.panel { ... }
!
.panel-colored { ... }

38.
.panel { ... }
!
.panel-colored { ... }
ステートルール
- SMACSS -
https://smacss.com/book/type-state

39.
.panel { ... }
!
.panel-colored { ... }

40.
.panel { ... }
!
/* States */
.is-panel-active { ... }

41.
.panel { ... }
!
/* States */
.panel.is-active { ... }

42.
.panel { ... }
!
/* States */
.panel:hover,
.panel.is-active { ... }

43.
再利用しない
ユニークな部分は？

44.
プロジェクトレイヤー
- MCSS -
http://operatino.github.io/MCSS/ja/

45.
.tagline { ... }

46.
.tagline { ... }
!
.tagline .button { ... }

47.
プロジェクトレイヤー
- FLOCSS -
https://github.com/hiloki/flocss

48.
.p-tagline { ... }
!
.p-tagline .c-button { ... }

49.
関心を分離せよ
https://www.flickr.com/photos/clement127/9761836954

50.
シナリオを立て
汎用さに対応する

51.
<a class="button">Download</a>

52.
<a class="button">Download</a>
!
<button class="button">Download</button>

53.
<a class="button">Download</a>
!
<button class="button">Download</button>
!
<span class="button">Download</span>

54.
.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}

55.
.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}
ベースは後から
変更するのが難しい

56.
.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}
Modifierで
拡張すべき要素か
どうかをよく検討する

57.
.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}

58.
スタイルとJSの
フックを分離する

59.
HTML
<div class="panel"></div>
JS
$('.panel').on('click' ...);

60.
HTML
<div class="panel js-ui-featured"></div>
JS
$('.js-ui-featured').on('click' ...);

61.
AngularJS
https://angularjs.org/

62.
<div class="panel" ng-click="...">
</div>

63.
コンポーネント同士の
関係を疎にする

64.
.panel { ... }
!
.panel .heading { ... }

65.
.panel { ... }
!
.heading { ... }

66.
.panel { ... }
!
.heading 関{ 連...す }る 要素として
捉えるなら
サブコンポーネント
として定義する

67.
.panel { ... }
!
.panel-heading { ... }

68.
.panel { ... }
!
.panel-heading { ... }
もしくは命名で
どのようなルールが
適用されるかを伝える

69.
http://getbootstrap.com/

70.
http://getbootstrap.com/
Button groups

71.
<Bduivtt oclna sgsr=o"butpn-sg:roup">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
http://getbootstrap.com/

72.
レイアウトを
分離する
- SMACSS -
https://smacss.com/book/type-state

73.
.panel {
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 20px;
width: 220px;
background: #fff;
}

74.
.panel {
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 20px;
width: 220px;
background: #fff;
}

75.
.l-featured .panel {
float: left;
margin-right: 20px;
width: 220px;
}

76.
.l-featured .panel {
float: left;
margin-right: 20px;
width: 220px;
} ユーティリティで
対応する
- SUIT CSS -
https://github.com/suitcss

77.
.u-float-left {
float: left;
}
!
.u-margin-r-m {
margin-right: 20px;
}
!
...

78.
.u-float-left {
float: left;
}
!
.u-margin-r-m {
margin-right: 20px;
}
!
...
グリッドシステム
を活用する
- Kite -
http://hiloki.github.io/kitecss/

79.
<div class="kite kite--grid has-gutter">
<div class="panel kite__item is-3of12">
...
</div>
<div class="panel kite__item is-3of12">
...
</div>
<div class="panel kite__item is-3of12">
...
</div>
<div class="panel kite__item is-3of12">
...
</div>
</div>

80.
http://hiloki.github.io/kitecss/

81.
命名のルール
https://www.flickr.com/photos/bfishadow/3634061465

82.
https://bem.info/

83.
https://bem.info/
block
block_modifier
block__element
block__element_modifier

84.
http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html

85.
component
component--modifier
component__subcomponent
component__subcomponent--modifier
http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html

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

87.
c-component
c-component—modifier
c-component__subcomponent
c-component__subcomponent—modifier
https://github.com/hiloki/flocss

88.
.button { ... }
!
.button-raised { ... }
!
.button-large { ... }

89.
.button { ... }
!
.button—-raised { ... }
!
.button—-large { ... }

90.
.panel { ... }
!
.panel-heading { ... }

91.
.panel { ... }
!
.panel__heading { ... }

92.
https://github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection

93.
スタイルガイドドリブン開発
http://webuild.envato.com/blog/styleguide-driven-development/
https://www.flickr.com/photos/tveskov/5550625027

94.
http://kaleistyleguide.com/

95.
http://kaleistyleguide.com/
シナリオを
可視化する

96.
生きたスタイルガイド
を持ち込む

97.
https://www.flickr.com/photos/dex1138/7002850433
Code Smells
http://article.enja.io/articles/code-smells-in-css.html

98.
スタイルの取り消し

99.
.button {
box-sizing: border-box;
padding: 12px 26px;
text-align: center;
}
!
.button—-no-padding {
スタイルの取り消し
padding: 0;
}

100.
.button {
box-sizing: border-box;
padding: 12px 26px;
text-align: center;
}
!
.button—-no-padding {
スタイルの取り消し
padding: 0;
}

101.
.button {
box-sizing: border-box;
text-align: center;
}
!
.button—-large {
スタイルの取り消し
padding: 12px 26px;
}

102.
マジックナンバー

103.
マジックナンバー
.bubble {
position: absolute;
top: -57px;
left: 0;
...
}

104.
マジックナンバー
.bubble {
position: absolute;
top: -57px;
left: 0;
...
}

105.
マジックナンバー
.bubble {
position: absolute;
bottom: 100%;
left: 0;
...
}

106.
受動的な詳細度

107.
#main .button {
margin: 20px !important;
width: 100% !important;
受動的な詳細度
}

108.
#main .button {
margin: 20px !important;
width: 100% !important;
受動的な詳細度
}

109.
.u-margin-m {
margin: 20px !important;
}
!
.button--full {
受動的な詳細度
width: 100%;
}

110.
競合する要素に優先順位を
! ピクセルパーフェクト or フレキシブル
! すぐに稼働するコード or 美しいコード
競合する要素に優先順位を
! DRY or 保守性
! 正しさ or 一貫性
! 汎用性 or シンプルさ

111.
https://github.com/pocotan001/ptan-no-css

112.
https://github.com/pocotan001/ptan-no-css
! ベースはFLOCSSを採用
! 例外としてコンポーネントはプリフィックスなし
! ユーティリティのみ略語を許容
! CSSプリプロセッサーはなし
! Concat, Myth, Autoprefixer, Minify

113.
Designer ♥ Developer
http://www.flickr.com/photos/fallentomato/11768159726

114.
“壊れない完璧な設計を求めるのでは
なく、壊れたときに勇気を持って修
復できる設計を。
- cssradar

115.
THANK YOU
https://www.flickr.com/photos/tveskov/3387394098