cssでのcolorの表記

Question

cssでの色の指定で#fffかwhiteなのかどちらがよろしいでしょうか？
同じ開発をする人の中では一目瞭然だし、一般ユーザーもわかりやすいと思うのですが、逆にわかりくいほうがいいのでしょうか？

そうするとオブジェクト指向の理念から外れているように思えますが

皆様様々な意見をありがとうございました。

Answer 1

cssでの色の指定で#fffかwhiteなのかどちらがよろしいでしょうか？

どっちでもいい。

同じ開発をする人の中では一目瞭然だし、一般ユーザーもわかりやすいと思うのですが、逆にわかりくいほうがいいのでしょうか？

一般ユーザーはわざわざソースコードまで見ることはないと思うが、一般的にソースコードはわかりやすく書くことが望ましい。

オブジェクト指向の理念から外れているように思えますが

一体、オブジェクト指向をどのように理解しているのでしょうか？
CSSと関係があるキーワードとは思いません。

Comments

[goforward]

たしかに関係ありませんでした。もう少し考えて書きます

Answer 2

モダンな開発環境では、CSSを直接書かずに、Sass、Less、PostCSSといったプリプロセッサで生成する方法が主流となっています。

これらはできるだけ容量を削減するように動くので、color: rgb(255, 255, 255);もcolor: white;も、同じ色を表現できていちばんバイト数の少ない、color: #fff;という形に変換してしまいます。

出来上がったCSSは、もはや人間が直接読み書きすることはあまり想定されません。

Answer 3

オブジェクト指標について。

これはクラスの振り分けの段階で、oocssで記述するか、BEMで記述するかによるもので、カラーを（わかりやすく書こう）とする必要はあまりないと思います。

cssは分かりやすく書かないと破綻しやすい。と聞いたことあると思いますが、それはcssでカラーコードにするかとか、分かりやすいように英単語にするか。ではなく、たとえばspan class="1"とか、id="a-5"ではなくで、クラスを見てどんなスタイリングがしてあるのかを予測しやすくし、またクラス統一にすることで、たとえサイトのレイアウトが変更しても少ない手数で実装ができるようにする。とかがあります。

詳しくは、css設計の教科書という本を読まれるとよいかと思います。

Comments

[garchomp]

追記です。カラーだけに関してならadobe colorホイールという奴使ってみることをお勧めします。
配色を一瞬で決めることができ、当時使ったカラーコードを保存できたりもする（みたいです）

なお、全機能無料で使えます。

Answer 4

引用テキストcssでの色の指定で#fffかwhiteなのかどちらがよろしいでしょうか？
引用テキスト同じ開発をする人の中では一目瞭然だし、一般ユーザーもわかりやすいと思うのですが、逆に> 引用テキストわかりくいほうがいいのでしょうか？

皆様もおっしゃっている通り、ここはお好きにどうぞ。

ちなみに私はユーザーに色の確認することが多いのですが、会話ではなく共通の変換ツール(色⇔16進)を使って決めています。(ググレばいくらでもあります。)
そのツールが16進なのでそのまま利用しています。

しいて言うなら、あっちこっちで表記が異なる、っていうのは気持ち悪いので統一する
ってとこだけこだわってはいかがでしょうか？

引用テキストそうするとオブジェクト指向の理念から外れているように思えますが

「オブジェクト指向の理念から外れている」と考え、それがリスクだと判断されているのではあれば「オブジェクト指向の理念」から外れないほうをチョイスされるといいと思いますよ。
ちなみに「オブジェクト指向の理念から外れている」かどうかは別ですね。

Answer 5

私もどちらでも良いと思います。
自分がわかれば(笑)

whiteとかはそれで
できるので使いますし、#fffがwhiteだと理解していればそれこそどちらでもって感じです。

色の名前指定だと細かい部分で難しかったりするので、カラーコードになることが多いですし、そのコードはサイト見ながら探して書きます。

rgba指定は私はあんまし使わなかったりしますが、より細かい指定をするのには必要じゃないかと思います。

私の単純な考え方ですが、名前 < コード < rgbaで細かさが違うって思ってます。
そうじゃないよって言われるかもしれませんが、そんな感じでやってます。

Comments

[maisumakun]

背景色だけのアルファをかけるときは、（画像を用意するとかもっと手間な方法を除けば）rgbaしか手段がないです（opacityで透過をかけると、上に乗ったものまで透過が効くという、違った挙動になります）。

[goforward]

確かに薄い緑などは名前(green)の前に何かを付けますが16進数の方が便利なように思えます