ポータルっぽいサイトをコーディングしていたところ、命名や要素の考え方について、迷いが生じてしまい、予想以上に作業が遅くなりました。
ということで、いろいろ考えてみました。
一般的に言われる良いCSSとは、以下のような感じでしょうか。
また、下記のガイドラインも有名です。
それでは、考えてみます。
あとでプロパティを変更しても良い名前にする
.red{color:#f00;}というclassを設定し、のちに茶色へ変更することになった場合、そのままcolorを変えてしまうと、意味が分からなくなります。
新しく.brownを作成するのが自然だと思いますが、全てのHTMLファイルを置換しなくてはいけません。
.cautionだったら、CSSの変更のみで済んだかもしれません。
再利用できる名前にする
.header-textというclassをフッター部分に使いたくなった場合、このclass名だと、違和感を感じる人が多いと思います。
.sub-textなどであれば、そのまま再利用できたかもしれません。
あとから見ても予測しやすい名前にする
.text1、.text2、.text3…などとスタイルが定義されていると、.text1が何に使われてるのか、分かりません。
.lead、copyright、.captionなどであれば、少しは分かったかもしれません。
場所を変えてもスタイルが変更しないようにする
子孫セレクタでスタイルを設定すると、入れ子にした場合に影響を受けるため、
予想外のスタイルになることがあります。
また、子セレクタであっても、HTMLの構造に依存するため、ソースの場所を変えることは容易ではないでしょう。
全てのタグにclassが設定されていれば、変更は容易にできたかもしれません。
同じようなスタイルが繰り返さないようにする
全く同じスタイルが、複数あるならば、まとめたほうが良い場合があります。
専用のclassを作るべきか、カンマで区切って、複数に適用するべきか、役割よって変わると思います。
OOCSS
Object Oriented CSSの略です。
オブジェクト指向という考え方を、CSSの設計に応用します。
プロパティを、ストラクチャとスキンというように分け、幅や高さなどはストラクチャ、色や線はスキン、という風に複数のclassで、スタイルを定義します。
考え方的には悪くないのですが、これだけでは、上手くいかないことも多いです。
場合によっては、Sassなどを利用して、欠点を補完する必要がでてきます。
BEM
Block、Element、Modifierの略です。
- Blockは、部品枠
- Elementは、要素
- Modifierは、状態、装飾
.block__element–modifierというようにclassを設定します。
class名は、冗長になりますが、命名ルールが明確になります。
ほとんどのタグにclassが付くことになり、CSSファイル側の使い回しに疑問の余地があります。
こちらもSassなどを利用して、補完する必要があるかもしれません。
SMACSS
Scalable and Modular Architecture for CSSの略です。
5つに分けて、コーディングしていきます。
- ベースは、HTMLのタグにスタイルを設定することを指す。
- レイアウトは、ページのエリアを指す。
- モジュールは、再利用可能な部品を指す。
- 状態は、特定の状態を指す。
- テーマは、サイト全体の色味などを変更するスタイルを指す。
カテゴリ分けに、好みがでるかもしれませんが、考え方の参考になると思います。
まとめ
理想を全て叶えることはできません。
HTMLとCSSの負担は、トレードオフと言われています。
どちらに負担を多くかけるか、悩むところです。
ガイドラインから好みのルールを選んで、プロジェクト用にカスタマイズするのが良いようです。
個人的には、Sassに頼りすぎたコーディングは、あまり好みではないので、素のCSSでも、十分メリットが得られるルールを、考えたいです。
とにかく、どういう風に要素を分類するか、が大事ですね。
そんじゃーねー。
コメント