ポータルっぽいサイトをコーディングしていたところ、命名や要素の考え方について、迷いが生じてしまい、予想以上に作業が遅くなりました。
ということで、いろいろ考えてみました。

一般的に言われる良いCSSとは、以下のような感じでしょうか。

また、下記のガイドラインも有名です。

それでは、考えてみます。

あとでプロパティを変更しても良い名前にする

.red{color:#f00;}というclassを設定し、のちに茶色へ変更することになった場合、そのままcolorを変えてしまうと、意味が分からなくなります。

新しく.brownを作成するのが自然だと思いますが、全てのHTMLファイルを置換しなくてはいけません。
.cautionだったら、CSSの変更のみで済んだかもしれません。

再利用できる名前にする

.header-textというclassをフッター部分に使いたくなった場合、このclass名だと、違和感を感じる人が多いと思います。

.sub-textなどであれば、そのまま再利用できたかもしれません。

あとから見ても予測しやすい名前にする

.text1.text2.text3…などとスタイルが定義されていると、.text1が何に使われてるのか、分かりません。

.leadcopyright.captionなどであれば、少しは分かったかもしれません。

場所を変えてもスタイルが変更しないようにする

子孫セレクタでスタイルを設定すると、入れ子にした場合に影響を受けるため、
予想外のスタイルになることがあります。
また、子セレクタであっても、HTMLの構造に依存するため、ソースの場所を変えることは容易ではないでしょう。

全てのタグにclassが設定されていれば、変更は容易にできたかもしれません。

同じようなスタイルが繰り返さないようにする

全く同じスタイルが、複数あるならば、まとめたほうが良い場合があります。
専用のclassを作るべきか、カンマで区切って、複数に適用するべきか、役割よって変わると思います。

OOCSS

Object Oriented CSSの略です。
オブジェクト指向という考え方を、CSSの設計に応用します。

プロパティを、ストラクチャスキンというように分け、幅や高さなどはストラクチャ、色や線はスキン、という風に複数のclassで、スタイルを定義します。

考え方的には悪くないのですが、これだけでは、上手くいかないことも多いです。
場合によっては、Sassなどを利用して、欠点を補完する必要がでてきます。

OOCSS(オブジェクト指向CSS)のススメ

BEM

Block、Element、Modifierの略です。

  • Blockは、部品枠
  • Elementは、要素
  • Modifierは、状態、装飾

.block__element–modifierというようにclassを設定します。
class名は、冗長になりますが、命名ルールが明確になります。
ほとんどのタグにclassが付くことになり、CSSファイル側の使い回しに疑問の余地があります。
こちらもSassなどを利用して、補完する必要があるかもしれません。

BEMという命名規則とSass 3.3の新しい記法

SMACSS

Scalable and Modular Architecture for CSSの略です。
5つに分けて、コーディングしていきます。

  • ベースは、HTMLのタグにスタイルを設定することを指す。
  • レイアウトは、ページのエリアを指す。
  • モジュールは、再利用可能な部品を指す。
  • 状態は、特定の状態を指す。
  • テーマは、サイト全体の色味などを変更するスタイルを指す。

カテゴリ分けに、好みがでるかもしれませんが、考え方の参考になると思います。

SMACSSによるCSS設計

まとめ

理想を全て叶えることはできません。
HTMLとCSSの負担は、トレードオフと言われています。
どちらに負担を多くかけるか、悩むところです。

ガイドラインから好みのルールを選んで、プロジェクト用にカスタマイズするのが良いようです。
個人的には、Sassに頼りすぎたコーディングは、あまり好みではないので、素のCSSでも、十分メリットが得られるルールを、考えたいです。

とにかく、どういう風に要素を分類するか、が大事ですね。

そんじゃーねー。