🔰HTML/CSS, classの命名規則 ~ちび記法~

この"ちび記法"命名規則を守ると得られるメリット

• 比較的命名に迷わなくてよい
• 上書きされて "いつの間にか変わってる!"現象がない
• 形容詞を用いるので自然言語に近く可読性が高い
• 形容詞を用いるのでhtmlを見るだけでどんなcssや機能が当てられているかが想像つく

命名規則 ~ちび記法~

<div class="flyableBox-closed">
  <div class="flyableBox--head-backgroundColorIsWhite">...</div>
  <div class="flyableBox--body-risableUp-byHover flyableBox--body-risableUp-byClick">...</div>
</div>

• UIの要素を体現している名前は長くて良い（上書きされないため） flyableBox--item, flyableBox--item-closed
• 汎用的な名前にする（bootstrapに掲載していいくらいの）
  • x: プロダクト名FlyableApple
  • o: flyableApple
• 繋ぎ:
  • 子孫 -- （特別な理由がない限り、3つ以上繋げる必要はない。A>B>C なら A--C でよい）
  • 形容詞 - （形容詞を用いるということは、すなわち"主語"のスタイルを拡張しているということである）
  • 関係代名詞 - is
    • 関係代名詞とは？: "背景が白のBOX" のように "xxxxがooooな" という形容 が 主語 を修飾する品詞。形容詞と同じくらい日常頻繁に使われている品詞。 "背景が白のBOX" を英語にすると "the box that background color is white"(thatは省略できる)。
    • 関係代名詞を用いる 例: box-backgroundColorIsWhite
    • 関係代名詞は主語を形容するので形容詞扱いとする(= -を用いる )。すると拡張しやすい。
• 複数の形容詞を持たせたい場合は分ける
  • x: box-risableUp-byHover-byClick
  • o: box-risableUp-byHover, box-risableUp-byClick
  • こうすることでどんなcssや機能が当てられているかが想像つく
• 拡張元セレクタと併記しない。冗長だから
  • x: class="box-risableUp box-risableUp-byHover"
  • o: class="box-risableUp-byHover"
  • これを実現するために、sassをつかってextendしておきたい
• Aを拡張したB、Bを拡張したCなら A-B-C とする
  • 例: box-risableUp-byHover

命名以外のルール:

• コンテキスト（イレギュラーなmarginなど）により、2こくらいのプロパティを拡張したい(or打ち消したい)場合:
  • 下記aを併記して使用する
• 未来永劫変化しないプロパティをもつセレクタの名前は短くて良い mt-3, bootstrapなど (*a)
• cssセレクタなのにビジネス層の名前から命名しない
  • x: box-toDisplayData （この場合は"data"）

早見表

- 繋ぎ:
  - 子孫 `--` （特別な理由がない限り、3つ以上繋げる必要はない。A>B>C なら `A--C` でよい）
  - 形容詞 `-` （形容詞を用いるということは、すなわちセレクタAのスタイルを拡張しているということである）
  - イコール `Is`（必ず形容詞扱いとする apple-priceIsTwenty "値段が20のリンゴ"）

例

<!-- 水平に動かすためのツマミ -->
<div class="knob-toMove-horizontally">...</div>

<!-- フェードインされるbox -->
<div class="box-toBeFadedIn">...</div>

<!-- フェードインしているbox -->
<div class="box-fadingIn">...</div>

<!-- フェードインされたbox -->
<div class="box-fadedIn">...</div>

<!-- 挿入されるbox -->
<div class="box-toBeInserted">...</div>

<!-- displayがnoneであるbox -->
<div class="box-displayIsNone">...</div>

<!-- displayがnoneになるbox -->
<div class="box-toBeDisplayIsNone">...</div>

<!-- transitionでopacityが0になるbox -->
<div class="box-toBeOpacityIs0-withTransition">...</div>

<!-- clickでopacityが0になるbox -->
<div class="box-toBeOpacityIs0-byClick">...</div>