大規模と小規模のCSS設計使い分け

Bootstrapなどのフレームワーク、BEMSなどの命名規則や、OOCSSなどの構造の考え方。プロトタイプなどでない場合の、サステナビリティを確保するために構築するWebサイトの場合、これらの考え方をそのまま使うのは注意が必要。

Webサイトの形骸化は、結局のところ管理者を含む運用者のレベルやリソース、モチベーションなどに依存する上、お金や時間のコストと目的や目標と釣り合わないと、継続できなくなるから。

そりゃそうだ。無駄だもの。

小規模サイトの場合

命名規則はそれほどシビアにならなくてよいです。ナビゲーションの一貫性やグリッドの合わせくらいは考慮したいですが。

正直、PCサイトとして作るだけなら、右画像左テキストなどのエレメントは、tableで画像側にwidth:1%とガーター分のpaddingを入れるので全部のサイズに対応できるので、手間かけたくなければそのくらいの妥協していいと思う。

実運用者がフレームワークや命名規則、構造を既存のものを理解するか、ある程度カスタマイズできる状態なら、武器になる。

後々自由にできる部分とできない部分で詰まり、その場しのぎの対応を積み重ねることで、ミンチェスターミステリーハウスのように、後々メンテナンスなんてできねーぜ！ってならないように注意できればいい。

Webサイトを設計する際、テンプレートパターンを作っておくといい。事前に用意されたテンプレートに沿って、内容を変えるだけ。

そうでなければ、WYSIWYGなど使ってもいいと思う。その場合には、あらかじめエレメントパターン（コンポーネントとかテンプレートとか言われる類）を用意して使いわけるのが楽。サイトの整合性も保てるのでお勧めです。

大規模は、500～1000P以上くらい。

現実的には、実装がわかるIAを入れましょう。話はそこからだ！と言いたいところですが、CSS側だけでできることもあります。

一番大きなナビゲーションを区画としますが、

CSSでの名前空間を考えるだけで、大きな保守性を生むことができます。

ヘッダーもフッターもメインエリアも含め、サイト全体に及ぶ場合、グローバル領域でセレクタ指定します。

.bold{font-weight:bold}など

メインエリアなどだけで使う場合

#main .box-3column{}など

ある区画のメイン領域で使う場合

.hogehoge #main .hugahuga{}

この.hogehogeをトリガークラスと呼びますが、このトリガークラスがあることで、領域定義の汚染なく、区画ごとにCSSやエレメント（コンポーネント）管理できます。

あとは個別の命名ルールについては、プレフィックスやサフィックスで、どんなエレメントがあるかを全体把握し、適切な深さにふさわしい名前を付けるとよい。

.hogehoge #main .nav-category{}

など。

大体テンプレートパターンでいける。バナーのせろだの、この余ってるとこに何かしろだのいってくるパターンが多いです。経験でいうと・・・。

なので、エンジニアに話がきた時には、時すでに遅し、の場合がほとんどなので、気にせず生きましょう。