Help us understand the problem. What is going on with this article?

デザインしながらコンポーネント名とか変数名とか考える時のルール

More than 1 year has passed since last update.

※オレオレルールです
※順次追記・書き直ししながら整形予定

Figmaとかでカラースタイルを作ったり、コンポーネントを作ったり、
CSS(SASS)で変数を作ったり、クラス名をきめたり、
コーディングやプログラミングと同じように、デザインの現場でも、「命名規則」を意識することが多くなってきました。

Sketch以降デザインツールもコンポーネントとか再利用性を意識した機能をもったものが増えてきたので、
自分のメモとしてまとめます。

色は基本的に必ず変数化

色の変数名は、値が変化する可能性を考えてつける

👎(なるべく)避けるパターン

  • color-red

👍こうする

  • color-alert
  • 警告

❓なんで?

変数化(スタイル化)するということは、デザインを作っていく中でその変数の値を変更する可能性があるということです。
なのでcolor-redとかとか、値を変数名・スタイル名にいれてしまうと、あとで変更したときに、名前と値の辻褄が合わなくなる場合があります。
(CSSを書いた経験があるとよく分かる話)

例外もある

例外的に、色の話でいうと、とかその色であることをあえて変数名・スタイル名に入れるというケースもあります。
その色であることが、その変数・スタイルにとっての存在意義である場合は、値をそのまま名前に入れる場合もあります。

値の重複を妨げない。(意味のある重複)

👎避けるパターン

  • 赤(#f00)

👍こうする

  • 通知(#f00)
  • アクセント(#f00)

色などの見た目ではなく、意味で命名する

「名前に値を入れない」という前の話とも関係する話。

例えば、警告として利用する「赤」と、単なるデザインとして「赤」は、仮に同じ色で作ったとしても、用途・意味が違うので、あとで値を分けるということも考えられます。
結果としての見た目ではなく、その意味を捉えた命名をしましょう。

意味での命名がどうしてもう難しい場合は連番

CSSの命名規制はBEMを使っているんですが、
例えば特定のクラスに複数のバリエーション(Modifier)を作る場合、それぞれのバリエーションを意味で命名するのが難しい場合もあります。
(汎用的に使うバリエーションだったりすると、意味付けが複数ある場合もあってなおさら)

その場合は、最後の手段として

.class { /* ... */ }
.class--type-2 { /* ... */ }
.class--type-3 { /* ... */ }

という命名をしています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした