コンポーネント作成時に意識していること

ウェブデザイナー KEISUKE NAKAO

2022/06/21 2022/06/21

1 はじめに
2 命名規則
- 2.1 【Elements（エレメント）】
3 保守しやすいように
4 似たコンポーネントを量産しない
- 4.1 【Variants（バリアント）】
5 コンポーネントに指定しないスタイル
- 5.1 【タグセレクタにスタイルをあてない】
6 まとめ

コンポーネント作成時に意識していること。

命名規則
保守しやすいように
似たコンポーネントを量産しない
コンポーネントに指定しないスタイル

はじめに

RSCSSを使用したコンポーネントの実装については、
日々試行錯誤をしながら実装をしておりますが、
未経験で入社して半年の私がコンポーネントを作成する際に意識していることをまとめていきたいと思います。
今回はよく登場するコンポーネントを例に話をしていこうと思います。

命名規則

コンポーネントを作成する際に一番最初に気にするのはクラス名です。
どのようなクラス名にするべきかを考える事は重要な項目の1つです。
コンポーネントは汎用性を考えて作成しなければ意味がありません。
ここをなにも気にせず汎用性のないクラス名を付けてしまうと汎用的なコンポーネントと認識できずに、新規でコンポーネントを作成してしまうケースもよく発生してせっかく作成したコンポーネントを有効に使えない上に、手間がかかってしまいます。
そのため、「button-round」や「list-mark」のような汎用性のある分かりやすいコンポーネントの名前で作成していくと今後の開発で効率よくコンポーネントを使いまわしていけます。
RSCSSではコンポーネントは少なくとも単語2つをハイフンで連結します。コンポーネント以外のエレメントやバリアントはハイフンを使わないので、クラス名にハイフンがあればそれはすべてコンポーネントです。

例）button-round（丸形のボタン）
list-mark（リストマーク）
section-title（セクションのタイトル）

【Elements（エレメント）】

コンポーネントのクラス名は２つの単語をハイフンで連結しましたが、エレメントのクラス名は単語一つです。ハイフンがつかないクラスは全てエレメントです。エレメントはコンポーネントによって隠れてしまうので、簡単で分かりやすいクラス名を与えるのを意識します。

例）.text { }
.inner { }
.content { }
.thumbnail { }

保守しやすいように

Webサイトは制作して終わりではありません。
むしろ公開して運用してからが本番です。
運用する上でコンテンツの更新は必ず行われますし、場合によっては大きな改修が行われることも少なくないでしょう。
その際に、設計がぐちゃぐちゃで書かれていると修正や改修の時に困りますし手間がかかります。丁寧なCSS設計が行われていてメンテナンス性の高いコードを書いているとスムーズに更新・改修を行うことが可能です。
ちなみに僕は最初に比べるとマシになったと思ってますが、ぐちゃぐちゃな設計になってしまっていることもまだまだあります…

フォントサイズやカラーなどのデザインシステムや、ボタンやリストやアイコン、見出しタイトルのスタイルなど、同じスタイルやパーツが複数のページに使用されていることがよくあります。
これをページ毎に新規でコンポーネントを書き足していたら、cssの量が膨大となってしまい修正があったときに一括で修正ができません。
共通部分をコンポーネント化していくことによって、スタイルを再利用しやすいように記述量を減らせますし改修もしやすくなります。

似たコンポーネントを量産しない

コンポーネントを実装していると、例えば大きさや色が少し違う場合に全く別のコンポーネントを新規で作成してしまうことがあるかもしれません。ですが、それをしてしまうとせっかく再利用可能にしたコンポーネントの利点が失われてしまい、特定のものに特化した新規のコンポーネントが生まれてしまいます。

そのため、なるべく一つのコンポーネントに収めることができないかをまずは考えます。それでもできない場合が発生したときは最悪、別に新規でコンポーネントを作成するといいと思います。
また、一部のスタイルが違うコンポーネントを作成する際に便利な概念がRSCSSにはあります。

【Variants（バリアント）】

Variants（バリアント）とは汎用的に使われるコンポーネントとは一部異なる場合に使います。
バリアントの命名は「-red」のようにハイフンをバリアントの前につけて使用します。

.btn-rounded {
        &.-red { }   &.-blue { }
}

コンポーネントに指定しないスタイル

汎用性のあるコンポーネントに「height」「width」「margin」「max-width」「max-height」は指定してはいけません。
これらのスタイルはコンポーネントには記述せず、ページごと特有のページに幅、高さ、マージンを記述することによりスタイルを調整できます。

「height」を指定すると、高さが固定値で指定されてしまうため、ボタンの中のテキストに改行が生じた場合に崩れてしまいます。

「width」を指定すると、幅が固定値で指定されているため、指定した横幅以下の場所で使う時に困ってしまいます。

「margin」を指定すると、ボタンにマージンが指定されているため、マージンが不要な場合にわざわざ新たにマージンをつけて打ち消す必要がでてきてしまいます。

仮に高さを固定値で利用したい場合はボタンに関して言えば、paddingは最低限必要な幅をとり高さは「min-height」をあてることにより「height」をコンポーネントで使用せずに調整することもできます。

【タグセレクタにスタイルをあてない】

他にもタグセレクタを使わないようにしています。
アプリで出力していて新たなクラス名を与えられない等の場合以外は、可能な限りタグセレクタではなくクラス名を使用します。タグセレクタに関しては使用するのが禁止ではないですが、パフォーマンスが低下してしまう可能性があり後々の要素の変更が許されなくなってしまうので柔軟性が欠けてしまいます。
以下は良くない例です。