class 名・id 名・フォルダ名 [CSS]

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