11/18イベント登壇資料です。

1. CSS Architecture
for the future
­未来を見据えるCSS設計­

2. 自己紹介

3. ホリグチ セイト
Front-End-Engineer
LIG.inc 所属
@seito_horiguchi

4. 自己紹介
プロジェクトの未来のためのCSS設計
未来のプロジェクトのためのCSS設計
まとめ
アジェンダ

5. プロジェクトの未来のためのCSS設計

6. ＝ プロジェクトが失敗しないためのCSS設計

7. 2つのポイントを抑えておく

8. チームメンバーのスキルセット
プロジェクトの内容

9. CSS設計を知っているか？
CSSメタ言語を知っているか？
HTML5を知っているか？
…etc

10. どんな内容のプロジェクトか？
運用フェーズではどう進めるのか？
どうスケールしていくか？
…etc

11. OOCSS
スタイルガイド
BEM
Sass
Less
コーディングルール（厳しめ）
コーディングルール（優しめ）
ツールや方法論はたくさんある

12. OOCSS
スタイルガイド
コーディングルール（優しめ）
My project
Sass

13. STOP！

14. 見落としがちな事項

15. 誰が運用するの？

16. →
開発：
ベテランエンジニア
運用：
？？？

19. style.css
… 自社によるCSS
maintenance.css
… 運用者によるCSS

20. 特殊なコンテンツを含むページ

22. プレフィックス
例）.lig-xxx

23. <header class= lig-header >
<div class= lig-header-logo >
<a href= … >Lig.inc</a>
</div>
<nav class= lig-header-nav >
<ul class= lig-header-nav-list >
<li>
<a href= … >Top</a>
</li>
<li>
<a href= … >About</a>
</li>
<li>
<a href= … >Contact</a>
</li>
</ul>
</nav>

24. .lig-header {…}
.lig-header-logo {…}
.lig-header-logo > a {…}
.lig-header-nav {…}
.lig-header-nav-list {…}
.lig-header-nav > li {…}
.lig-header-nav > li > a {…}

25. 未来のプロジェクトのためのCSS設計

26. そのプロジェクトだけでなく、
今後のプロジェクトでも再利用・拡張できるCSSを

27. モジュール

28. Title text
sample text sample text sample
text sample text sample text …
Read
ID
Login
PW
Login
TANAKA TARO
sample text sample text sample text
sample text sample text sample text
sample text
t f
Project A

29. Read
ID
Login
PW
Login
TANAKA TARO
sample text sample text sample text
sample text sample text sample text
sample text
Project B
Title text
sample text sample text
sample text sample text
sample text …
t

30. Title text
sample text sample text sample
text sample text sample text …
Read
ID
Login
PW
Login
TANAKA TARO
sample text sample text sample text
sample text sample text sample text
sample text
t f
Project A

31. Read
ID
Login
PW
Login
TANAKA TARO
sample text sample text sample text
sample text sample text sample text
sample text
Project B
Title text
sample text sample text
sample text sample text
sample text …
t

32. Separate structure and skin
Separate container and content

33. .button {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 5px 30px;
font-size: 15px;
border-radius: 5px;
color: #fff;
background-color: #000;
//skin style
&.button-primary {
background-color: #12bd00;
}
&.button-secondary {
background-color: #00a9c7;
}
}

34. .button {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 5px 30px;
font-size: 15px;
border-radius: 5px;
color: #fff;
background-color: #000;
//skin style
&.button-primary {
background-color: #12bd00;
}
&.button-secondary {
background-color: #00a9c7;
}
}
Structureは
再利用しやすい

35. グリッド

37. 2
3
3
4

38. .grid {
font-size: 0;
> .grid-item {
display: inline-block;
vertical-align: top;
font-size: 15px;
}
//カラム
&.grid-col2 {
> .grid-item {
width: 50%;
}
}
&.grid-col3 {
> .grid-item {
width: 33.3333%;
}
}
&.grid-col4 {
> .grid-item {
width: 25%;
}
}
&.grid-col5 {
> .grid-item {
width: 20%;
}
}
&.grid-col6 {
> .grid-item {
width: 16.6666%;
}
}
&.grid-col7 {
> .grid-item {
width: 20%;

40. 4
3
2

42. モジュール
グリッド
ヘルパークラス
リセットCSS
再利用できるものは利用する

43. まとめ

44. 視野を広げて、プロジェクト全体の未来を設計する

45. 視野を広げて、未来のプロジェクトのCSSをも設計をする

46. ＋

47. 講師のお仕事
CSS設計が必要なプロダクト開発 などなど
よろしければ、ぜひ。

48. ご清聴ありがとうございました！