Tenderfeel/shower-css.md

## shower-css.md

      
    Raw
  

              shower-css.md
            
          
    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