最新のIT技術を駆使して音楽関連サービスを展開しています。日々の活動内容から得た知識をお届けする開発ブログです。CSSB!この記事は最終更新日から1年以上が経過しています。序文カスケーディングスタイルシートというものはHTMLの領域ともjavascriptとの領域とも違う独自の文化があります。レビューも困難を極めているのではないでしょうか。コードレビューはできてもCSSはよくわからない・・・という人も多いと思います。そこで私がよく使っている(た)CSSデザインパターンの一つを例示したいと思います。前述のとおりCSSはコーディングでもスクリプトでもマークアップでもなくちょうどパワポやVBの要素一つ一つの属性を1つのテキストに羅列したものという感じがわかりやすいでしょうか。いっしょくたにまとめるべき情報ではありません。カプセル化されているべきです。ポリシーを持たない人が書くとすぐにめちゃくちゃになってしまいます。opacity:1;}なにがダメかというと・構造と要素の分離ができていない・にも関わらず同じ要素指定が複数書いてあったり重複してたりしてメンテナンスのことをまったく考えていない・無駄なセレクタ指定が多すぎる(影響範囲を考慮していない)・省略記法と詳細な書き方を混ぜて書いていて、数字の扱い方も雑(マジックナンバー)なんで変更しようとしても思う通りに変更できない可能性が高い、というかそんなことが何度もあった。・ID指定は使うなといってもちっともきいてくれない・誤字脱字を指摘してもぜんぜんなおしてくれないと一部分をかいつまんでも大量にでてくるのですが、これと同じような調子で数十個のcssファイルに数千行書かれているのですからいくら書いても書ききれないといった様相で。CSSに設計思想をもちこむCSSのデザインパターンはいくつかありますが長期運用の観点からOOCSSがおすすめです。・基本的な構造化を覚えるだけでOK・(ハイフンふたつの場合は、などの)記号の意味を覚えなくてもよい・オブジェクト指向をベースに思考できる・世の中のだいたいのパターンは同じ思考パターンをベースに考えられるため基礎として最適ほかにもSMACSS、BEM(MindBEMding)、SuitCSS、FLOCSSといったものが見つかりますがどれも根本的には同じで、構造化してシンプルに保つことが目的です。私の場合はエンタープライズ要求で(キャンペーンページや階層の浅いWebサイトでない)複数人数で改修が発生する場合、記法ルールがわかりやすいほうがよりよいと判断しました。採用しなかったパターンですが、例えばBEMのようなシングルクラスでスタイル指定をする(クラス指定を一つだけ書く)パターンは上述した短期的なキャンペーンページのように絵コンテを書いてそのままHTMLを作成するというような小規模なWebページの場合はちょうどいいと思います。ワイヤフレームを作ってトンマナを合わせないといけないようなECショップや動的要素の強いサイトを作成する場合、コンポーネントの増加にともなってマルチなクラスになってくる傾向が強くシングルクラスでは向かないのではないか、と判断しました。他にもSMACSSはディレクトリ構成や構造化が細分化されておりより堅牢で理想的な感じですが正直デザイナーエンジニア含めて全員ができるとは思えません。いった設計思想(フローではなくルールに近い)は誰かひとりでも及第点に達していない場合、構造が壊れていってしまいます。OOCSS(オブジェクト指向CSS)OOCSSのやり方です。上述の通りOOCSSの目的は構造とスキンを分離し複数の定義を組み合わせて使用するということです。そのためには我々の設計手法と同じアプローチで、クラス設計が重要です。数年前に書いたメモです。これを元に作っていきます。2.構造化まず、.lineというインライン要素に.unitという箱があります。left・じっこうけっか横にならびました。これで構造化は終了です3.スキン.modというスキン(見た目)の指定でredとかblueとか書いてあるので色をつけられるようにします。#0f0・じっこうけっかいろがつきましたあまりにも簡単な例でしたが手順としてはこんな感じです。仕様変更などが起こった場合、例えば色を変えたいとなったらスキンを追加し変更すれば完了ですし段組みを変えたい、となった場合はスキン(トンマナ)はそのままでレイアウトを作れば完了です。イミュータブルにIDを追加していく必要はありませんはずです。THENDという思想を最初に打ち立てたのですが私の実力不足によりダメな例のようなCSSが出来上がってしまいました。その3【iOSアプリ】VIPERアーキテクチャのプロダクトで配属されて3週間の新卒社員のOJTをした話。