htmlcss OOCSSで管理しやすい命名規則を設計しよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

OOCSSで管理しやすい命名規則を設計しよう

HTML×CSS|2020年01月06日

2020年01月06日
  • このエントリーをはてなブックマークに追加

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つではありません。
自分なりに保守性の高い方法を考えて設計してみましょう。

■ 一例ファイルのダウンロード
https://startout.work/mission/css/3/mission3.zip

前回のファイルをお持ちの方は、そのまま前回のファイルを使いましょう。
お持ちで無い方は、前項のSMACSSおよびFLOCSSを先にクリアしてください。

OOCSSはあくまで命名規則です。
フォルダや全体の設計を考えて、はじめて命名規則も活きてきます。
ぜひ一通り習得し、メンテナンス性の高いCSSを書けるようになりましょう。

意識すべきこと

今回は注意点というよりもCSSを設計する上で意識すべきことです。
CSSでclass等を設計する際の、一般的にルールとも言えます。
それが、以下の4つです。

  • 予測しやすい
    すぐに誰もが名前をイメージできる命名やルール付け。また、意図しない箇所へ影響しない。
  • 再利用しやすい
    前作ったパーツをコンポーネント化して使いまわししやすい。
  • 保守しやすい
    後で変更があった時に、すぐに変えやすい。
  • 拡張しやすい
    後でデザインが追加されても対応しやすく、簡単に管理でき、学習コストも安い。

基本的にこれら4つのルールを意識してCSSを設計してみてください。
これはCSSの基本概念とでも呼べる重要なものですので、覚えておきましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら