CSSを書く時、悩みのタネの1つが命名規則です。
毎回、どうclass名をつければ良いのか、悩んでいる方もいらっしゃるのではないでしょうか。
適当にclass名をつけてしまったら、あとから混乱することになります。
かと言って、classの命名だけに時間をかけては、仕事に支障が出るでしょう。
だからこそ、class名に規則をつけることで、混乱を避け、スムーズにclass名をつけることができるのです。
classはじめとした名前の付け方に関するルールを命名規則と呼びます。
今回ご紹介するOOCSSは、命名規則の1つです。
OOCSSで書いたclassは、あとから管理および理解しやすい形になります。
ぜひ、OOCSSを学んで命名規則に関する無用なトラブルを消し去ってください。
OOCSSの基本的な書き方
まず、OOCSSの基本的な考え方は、構造とデザインの分割です。
class名および役割が、ストラクチャ(構造)とスキン(色など)に分けられます。
全体の形を整える構造と、色や線のようなデザイン。
すべてがこの考え方で成り立つと前提においてください。
例えば「形は同じまま色や雰囲気を変えたい」という時。
全て作り直すことなく、スキンだけを変えれば変えられます。
このように設計しておくことで、一気にメンテナンス性が向上するのです。
では、具体的にどのように作ればいいのでしょう。
下記の設計をみてください。
.card{
width:30%;
padding:20px;
}
.card-red{
border:1px solid #ff0000;
background:#fff1f1;
}
CSSを学んだ方なら把握できるかとおもいます。
.cardで外枠を作り、.card-redで色と背景画像を指定しています。
こうすると、色やデザインを変更したい時、すぐに変えられます。
.card-green{
border:1px solid #00a404;
background:#f2fff2;
}
上記のようなスキン用のCSSを作り、class指定を差し替えれば良いだけですね。
.card-redを.card-greenに変えられるだけで、デザインが変わります。
もしこれが、構造もスキンも一緒になっていたら。
直接CSSの色を変える必要がありますし、再利用もできません。
こうした設計が、メンテナンス性を向上させるのです。
保守性やメンテナンス性、というと難しそうですが、案外シンプルですよね。
今回のミッション
今回のミッションですが、SMACSSで作ったデータの確認と追加です。
実は、前回作ったSMACSSのデータは、すでにOOCSSの構造になっています。
構造部分を「レイアウト」に収め、デザインを「テーマ」が担当しているのです。
ただ、そこにボタンやタイトルのデザインを新しく追加しておきました。
新しく追加したコンポーネントを、それぞれOOCSSで追加してみてください。
赤色が使われている箇所が3箇所あります。
もちろん今回も、答えは1つではありません。
自分なりに保守性の高い方法を考えて設計してみましょう。
■ MISSION 3
https://startout.work/mission/css/3/
■ 一例ファイルのダウンロード
https://startout.work/mission/css/3/mission3.zip
前回のファイルをお持ちの方は、そのまま前回のファイルを使いましょう。
お持ちで無い方は、前項のSMACSSおよびFLOCSSを先にクリアしてください。
OOCSSはあくまで命名規則です。
フォルダや全体の設計を考えて、はじめて命名規則も活きてきます。
ぜひ一通り習得し、メンテナンス性の高いCSSを書けるようになりましょう。
意識すべきこと
今回は注意点というよりもCSSを設計する上で意識すべきことです。
CSSでclass等を設計する際の、一般的にルールとも言えます。
それが、以下の4つです。
- 予測しやすい
すぐに誰もが名前をイメージできる命名やルール付け。また、意図しない箇所へ影響しない。 - 再利用しやすい
前作ったパーツをコンポーネント化して使いまわししやすい。 - 保守しやすい
後で変更があった時に、すぐに変えやすい。 - 拡張しやすい
後でデザインが追加されても対応しやすく、簡単に管理でき、学習コストも安い。
基本的にこれら4つのルールを意識してCSSを設計してみてください。
これはCSSの基本概念とでも呼べる重要なものですので、覚えておきましょう。