CSS における class / id の命名

参考:

こんな HTML と CSS のコーディング規約で書きたい – Qiita

破綻しにくい CSS 設計手法と命名規則 | murashun.jp

HTML / CSS の class の命名規則について、今ふたたび考える | MONSTER DIVE

id 名、class 名の付け方と記法 | WEB MANABU

新人コーダーに知っておいて欲しい命名規則の考え方 画像・ID・class 名 |クロノドライブ

CSS や画像の命名規則について | Web Design KOJIKA17

HTML と CSS クラスでよく使う命名について – Qiita

もう、class 名や id 名で悩まないんだからっ!!| CSS HappyLife

CSS のクラスや ID の命名規則とよく使われる名前 | PHP Archive

CSS 命名リスト表 | sparkle

class 名と id 名はどうやってつければいい? | ハイファイブクリエイト

代表的な命名規則

  • OOCSS (Object-Oriented CSS)
  • BEM (Block/Element/Modifier)
  • FLOCSS (Foundation/Layout/Object)

BEM

<div class="block">
  <div class="block__element"></div>
  <div class="block__element--modifier"></div>
</div>
<div class="block--modifier>
  <div class="block--modifier__element"></div>
</div>

参考:

BEM に基づいた CSS 命名規則について考えてみた | nomal note

共通パーツには「BEM」の命名規則を使おう | たねっぱ!

MindBEMding – getting your head ’round BEM syntax | CSS Wizardry

FLOCSS

  • Foundation
  • Layout
  • Object

参考:

FLOCSS をベースにしたファイルの構成と命名規則を考える | Tips Note by TAM

PRECSS

参考:

PRECSS – Manage your CSS with prefixes [Official]

CSS の新しい設計思想 PRECSS を作りました | SlideShare

ディレクトリ構造

参考:

Web サイトのディレクトリ構造とその命名規則に悩む – Qiita

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です