youkantoe

CSSにおける汎用性の高いクラス命名を考える

2020 / 4 / 14

前提要件

  • CSSはグローバルスコープである

    • vueとかで属性入れることはあるけど…
  • 基本的にflocssで書いてます

方向

名前 省略
top t
bottom b
left l
right r
x x
y y
  • 若干可読性が悪くなるのが難点だと思う
  • 読みにくいけど組み合わせてもいい

    • tl ( top + left )

位置

英語 日本語 使い道?
head
body
foot
up 上側
middle 真ん中
bottom 下側
center 真ん中
first 最初
second 二番目
thrid 三番目
near 近い
far 遠い
  • 位置は常に変わるためあまり常用したくはない希ガス

    • スマホとPCでも変わるし
    • ただ、可読性は高いと思う

汎用名詞

よくでてくるやつ。

意味を理解して、より使い分けて使うことで詳細度をコントロールした方がいいと思うけど、ほどほどが大事かも。

英語 日本語 使い道?
section 部分、断片 大きめの塊
block かたまり sectionよりも小さいけども、ある程度の大きさ。
unit 単一体、一個、一人
clan 一門 コンポーネントに近いようなものたち
part 一部 そのブロックの中で一部のみのDOM(小さい)。ユーティリティに近い。
area 区域 全体を覆うようなもの
zone 地帯、地域、区域 全体を覆うようなもの
wrap 包む、くるむ 汎用的な要素を内包するクラス名(divみたいな)
box
card
content
item
head
body
foot
  • ある程度予約語のように決め打ちしておけば、命名に悩む機会が減ると思う。
  • ただ、抽象的な名前が増えるとどんどん可読性が悪くなる気がする。

詳細名詞

名前 意味 使い道?
caroucel
heading