ShowerCSS

ソーシャルゲームのマークアップを主軸にした大規模開発用のHTML/CSS設計思想。
風呂 https://github.com/hiloki/flocss といったらシャワーだよねっていう

　 　　　*　　　　　　*
　　＊　　　　　＋　　ネタです
　 　　 n ∧＿∧　n
　＋　(ﾖ（* ´∀｀）E)
　 　 　 Y 　　　 Y　　　　＊

ここが困るよソシャゲ開発

機能（モジュール）が多い
ピグファンタジアで40くらい、オトギアはcβ時点で20くらい。GFなんかは50超えてそう
仕様決め・デザイン・開発が同時進行で先行きが不透明
決まってないから後回し・アテで・とりあえず仮の…は常套句
マークアップが正しく出来ないディベロッパーの存在
Flasherからの転身組に多い
アウトラインの崩壊
テキスト部分全部画像とか…ｾﾏﾝﾃｨｯｸageづらい
無限に増えるバリエーション
デザイナーは過去のUIを覚えてない
命名しづらいコンポーネント
名前付けてもあっさり消える

事例

タグのTPOが間違っている
divの中にli、dlの中にdiv
アウトラインが理解できていない
狂気のsection乱用
z-index操作のトラブル
そもそも仕様が難解

よろしい、ならばこうしよう

コモンと各モジュール用のユニークを分離しとけば増えたり減ったりしても対応しやすい
コモンとユニークに目印つけておけば書いた場所が特定しやすい
モジュール毎にCSS用意してイレギュラーなスタイルに対応すればコモンの肥大化が防げる
とはいえモジュールにしろUIにしろ似たり寄ったりなので、御馴染みのUIはコンポーネントとして用意することはできる
理解してもらえない常識なら捨てる
ガイドをその方面に向けて懇切丁寧に書く
divとフォーム要素があればブラウザゲームは作れるんだよ…
使用する要素を限定する（div,p,a,b,i,span,canvas+フォーム要素）
ガチガチにHTML5を貫くならそれを説明するドキュメントを用意した方がいい
見覚えのないUIが出て来たらデザイナーに確認する
既存UIと統一できるものはする
UI全部覚えておく
連番でいいよもう

基本原則

module

ゲームの機能はモジュールとして作られるので、HTML/cssもそれに合わせます。

マイページ (mypage)
おしらせ (info)
あいさつ (greeting)
ガチャ (gacha)
ショップ (shop)
アイテム一覧 (item)
クエスト (quest)
イベント (event)
フレンド (friend)
設定 (setting)
ヘルプ (help)

layout

画面のレイヤー構造とかゲーム内共通のヘッダーフッターなどグローバルなレイアウトというのは基本的には１つしか存在しないものです。なのでクラスではなくてIDでスタイル書く方が私は好きです。

レイヤー

大雑把に階層を分けておく

root : ルート
cover：暗幕
fly：ダイアログとかのルート
front：ローディング等

#root+#cover+#fly+#front

ダイアログ開いた時に薄暗くするやつは、各ダイアログに含むケースと１つの要素を使い回すケースのどちらかになると思うが、上の例は後者です。

グローバルUI

メインタグとかナウい〜

header#global-header+main+footer#global-footer

component

UIコンポーネントです。ページを構成するいろいろなパーツ。
デザイナーとすりあわせてなんぼです。

アコーディオン
accordion
アニメーション
animation
飾り枠・装飾線
border,bd,frame
セクション・ボックス
section, box
ボタン
btn
カルーセル
carousel
ダイアログ（アラート含む）
dialog
フォーム要素
form, select, checkbox, textarea
ゲージ
gauge
見出し
hd
ヘッダー・フッター
header,footer
アイコン
icon
リスト
list, listview
ローダー
loader
ナビゲーション（戻るリンク・ページング）
nav, pager
隙間(margin,padding)
spacer, m,p
ステータス（プレイヤー・カード・アイテム）
status, skill
メニュー
menu
タブ
tab
サムネイル
thumb

コモンとユニーク

コンポーネントはコモンなものとユニークなものに別れます。

common - 複数のモジュールで使用する
unique - 特定のモジュールでしか使用しない

ユニークなコンポーネントだったけど使用個所が増えた結果コモンに昇格することもある。とはいえ使用頻度が少なかったりする場合もあるので、単純に箇所でカウント昇格させればいいというわけでもない。

スタイルシートもコモンとユニークで分けます。

コモン→ common.css, main.css, core.css　それと分かればなんでもいい
ユニーク→ モジュール名.css, module.css, unique.css

各モジュールではコモン.cssとユニーク.cssの２つを読み込む。モジュールと同じ数だけユニークなCSSファイルが増えるわけですが、合計がコモンを超えないようなら１つにまとめてもいいと思う。

命名規則

基本的な所は以下にまとめたが、区切り文字をどうするかなど細かいことは入信している宗教の法に則ればいいと思う。

コモンにプレフィックスつける

コードネーム (osl-, pf-, sp-)
単語から(common-, com-, c-)

ユニークにはモジュール名をつける

mypage--tab
gacha--btn

名前の並び順を統一する

.[モジュール][コンポーネントカテゴリ][コンポーネント名][element][modifier]

ユニーク前提ならこういうのもアリ

#[モジュール]
   .[コンポーネントカテゴリ][コンポーネント名][element][modifier]

#mypage {
    .c-tab {}
    .c-btn {}
}

他のAPIも混じる事を考えるとコードネームは全部に付ける方がいいかもしれない。でも冗長

.[コードネーム][モジュール][コンポーネントカテゴリ][コンポーネント名][要素名][modifier]

BEM例

モジュール名の区切りをハイフン２本にする。
これだと複数のページに別れているモジュールで、「モジュール名-ページ名」という命名をしたときにコンポーネントの見分けがしやすい。

module--component
module--component_modifier
module--component__element_modifier

.mypage--tab.ag-tab {}
.mypage--hoge {}
.mypage--hoge__title {}

ディレクトリ構成

モジュール名、コンポーネント名で統一する

gacha/index.html
css/gacha.css
img/gacha/
js/gacha/

sass
├── component
│   ├── _animation.scss
│   ├── _border.scss
│   ├── _box.scss
│   ├── ....
│   └── _thumb.scss
├── general
│   ├── _base.scss
│   └── _layout.scss
├── sprite
│   ├── _btn.scss
│   ├── ....
│   └── _ui.scss
├── mixin
│   ├── _bubble.scss
│   ├── ....
│   └── _sprite.scss
├── _setting.scss
├── main.scss
├── ....
└── top.scss

images
├── component
│   ├── border
│   ├── box
│   ├── ....
│   └── thumb
├── sprite
│   ├── btn.png
│   ├── ....
│   └── ui.png
├── mypage
├── ....
└── top

Tenderfeel/shower-css.md