CSS Architecture for the future-未来を見据えるCSS設計-

自己紹介

ホリグチ　セイト

Front-End-Engineer

LIG.inc　所属

@seito_horiguchi

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

アジェンダ

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

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

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

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

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

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

OOCSS

スタイルガイド

BEM

Sass

Less

コーディングルール（厳しめ）

コーディングルール（優しめ）

ツールや方法論はたくさんある

OOCSS

スタイルガイド

コーディングルール（優しめ）

My project

Sass

STOP！

見落としがちな事項

誰が運用するの？

→

開発： ベテランエンジニア

運用： ？？？

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

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

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

<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> </header>

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

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

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

モジュール

Title textsample text sample text sample text sample text sample text …

Read

ID

Login

PW

LoginTANAKA TARO

sample text sample text sample text sample text sample text sample text sample text

t f

Project A

Read

ID

Login

PW

Login

TANAKA TAROsample text sample text sample text sample text sample text sample text sample text

Project B

Title textsample text sample text sample text sample text sample text …

t

Title textsample text sample text sample text sample text sample text …

Read

ID

Login

PW

LoginTANAKA TARO

sample text sample text sample text sample text sample text sample text sample text

t f

Project A

Read

ID

Login

PW

Login

TANAKA TAROsample text sample text sample text sample text sample text sample text sample text

Project B

Title textsample text sample text sample text sample text sample text …

t

Separate structure and skin Separate container and content

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

.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は 再利用しやすい

グリッド

2

3

3

4

.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%;

4

3

2

モジュール グリッド ヘルパークラス リセットCSS

再利用できるものは利用する

まとめ

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

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

＋

　講師のお仕事 　CSS設計が必要なプロダクト開発　などなど

よろしければ、ぜひ。

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