└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | # CSSのクラス名に使われる単語一覧
  2 | OOCSS、SMACSS、BEM、FLOCSSなどCSS設計のためのガイドラインはいくつも出ていますが、実際にコーディングする時に迷ってしまうのがどのようなクラス名を使用するのかということ。
  3 | 
  4 | 同じような意味の`.wrapper`と`.container`のどちらを使うのか、`.button`と`.btn`のように省略は許容するのか。コードを書く人によってばらつきが出たり、感覚的に書いていると区別もなく両方使ってしまったりします。
  5 | 
  6 | ここでは推奨する単語を定めてはいません。色々な単語を集めて分類・比較し、ルールを明確に定義するためのツールとして作成をしています。
  7 | 
  8 | ## アウトライン
  9 | HTML5におけるsection, article, nav要素のようにアウトラインを形成するセクションとそれに付随する要素です。
 10 | 
 11 | ### セクション
 12 | 単一の単語ではなく`.l-header`や`.mainNavigation`のようにプレフィックスを付与することで一意で明確な意図を示すこともできます。
 13 | 
 14 | * section
 15 | * article, main, entry, entries, content, contents, site
 16 | * aside, side, sidebar, secondary, second
 17 | * header, head
 18 | * footer, foot
 19 | * navigation, nav, menu
 20 | * home, top
 21 | * single（個別記事、シングルページ）
 22 | * post
 23 | 
 24 | ### セクションに関連する要素
 25 | * heading, headline, title
 26 | * lead（見出しの補足や記事の要約）
 27 | * logo（サイトロゴ）
 28 | * copyright, small（コピーライト）
 29 | * widget
 30 | * popular, ranking（人気記事、ランキング）
 31 | * privacy（プライバシーポリシー）
 32 | * sitemap（サイトマップ）
 33 | 
 34 | 
 35 | ## レイアウト
 36 | CSSでレイアウトを指定する際に使用します。BEMとSMACSSの分類方法を使用しています。セクションと同じくプレフィックスを付与してバリエーションを作ります。
 37 | 
 38 | ### ブロック
 39 | * wrapper, wrap, container, outer, area（要素のかたまりを物理的にまとめるために使用される大枠のコンテナブロック）
 40 | * inner, body, box, unit, holder, frame, region（wrapperやcontainerなどに入れ子にして配置するコンテナブロック）
 41 | * list, items（ul要素やol要素のような箇条書きや一覧）
 42 | * group, collection（同じ分類の要素をまとめる）
 43 | * grid（グリッドレイアウトを使用する時にルートになる）
 44 | * row（グリッドレイアウトを使用する時のclearfixや行を指定する）
 45 | * column, columns, col（グリッドレイアウトを使用する時の列の横幅を指定する）
 46 | * media（画像と文章が横並びになったもの）
 47 | * card（画像と文章が縦並びになったもの）
 48 | * tile, panel（複数の同じ形状のブロックを並べたもの）
 49 | * form
 50 | * video, player（動画）
 51 | * mask, overlay, blur（要素の上の階層に覆いかぶさって見た目を変化させる）
 52 | 
 53 | 
 54 | ### エレメント
 55 | * item, cell（ブロックに内包される汎用的な名前）
 56 | * link
 57 | * tagline, slogan（スローガン、キャッチコピー）
 58 | * catch, copy（キャッチコピー）
 59 | * text, message, sentence（文章）
 60 | * caption（図表を補足する）
 61 | * summary（概要、要約）
 62 | * note（注釈、注意）
 63 | * description, desc（概要、説明、解説）
 64 | * introduction（紹介する、前置き、解説）
 65 | * announce（告知、お知らせ）
 66 | * information, info 
 67 | * meta（メタ情報）
 68 | * target
 69 | * previous, next
 70 | 
 71 | ### モディファイア
 72 | エレメントやコンポーネントのバージョン違い。恒久的で状態が変化しません。汎用クラスにも使用できます。
 73 | 
 74 | * push
 75 | * pull
 76 | * fluid（内包されている要素によってサイズが可変する）
 77 | * fixed, sticky（fixedは固定、stickyは指定された位置から固定）
 78 | * reverse（反転する）
 79 | * left
 80 | * right
 81 | * center
 82 | * top
 83 | * middle
 84 | * bottom
 85 | * huge, large
 86 | * medium, normal
 87 | * small, tiny
 88 | * author
 89 | * guest, user
 90 | * sp, mobile, tb, pc（スマホ、タブレット、パソコン）
 91 | 
 92 | ### ステート
 93 | モディファイアと違いユーザーの操作などで状態が変化する。
 94 | 
 95 | * active, current（複数の選択肢のうち現在選択されている状態）
 96 | * disabled（機能が無効になっている状態）
 97 | * visible, show（見せる、表示する）
 98 | * invisible, hide, hidden（隠す、非表示にする）
 99 | * open, opened（開く）
100 | * close, closed（閉じる）
101 | * alert, error, caution, warning, danger（警告、エラー）
102 | * success（成功）
103 | 
104 | 
105 | ## プレフィックス
106 | クラス名の重複を避けたり意図を明確にするため、ブロックやコンポーネントにプレフィックス（接頭辞）を付与する。
107 | 
108 | * site, common（共通の）
109 | * global, main（主要な）
110 | * sub（補助的な）
111 | * general（一般的な、全体的な）
112 | * top（トップページの）
113 | * local
114 | * brand（サイトを象徴するカラーやフォント）
115 | * is-（ある状態になった）
116 | * has-（ある状態になっている）
117 | * l-, layout（ヘッダーやコンテンツ部分などのコンテナブロック）
118 | * p-（汎用的でないプロジェクト固有のパターン）
119 | * c-（汎用性があり再利用できるパターン）
120 | * u-（`mb-10`や`clearfix`といった単一の目的に使用するクラス）
121 | 
122 | ## コンポーネント
123 | ボタンやタブといった汎用的に使用される要素。
124 | 
125 | * grid
126 | * button, btn
127 | * tab, tabs
128 | * toggle（同じ操作で状態を切り替えられる）
129 | * dropdown（複数の値から選択できるリスト）
130 | * modal, daialog（確認や警告のため表示される）
131 | * lightbox
132 | * carousel, slider（コンテンツを水平・垂直にスライド表示させる）
133 | * accordion（タイトルとそれに対応したコンテンツを表示させる）
134 | * off-canvas（画面がスライドしてナビゲーションを表示させる）
135 | * tooltip, popover
136 | * breadcrumb（パンくずリスト）
137 | * search
138 | * pagenation, pager
139 | * backtop（トップへ戻る）
140 | * progress, progressbar
141 | * label
142 | * badge
143 | * caret
144 | * arrow
145 | 
146 | 
147 | ## 画像
148 | 主に画像の形式で使用される要素。
149 | 
150 | * image, img, photo
151 | * hero, visual, jumbotron, cover（ファーストビューに配置する大きめの画像）
152 | * thumbnail（画像を一覧表示するために縮小して表示させたもの）
153 | * avatar（ユーザーやゲストを識別するための画像）
154 | * feature（対応する文章の特徴を補足するための画像やイラスト）
155 | * gallery
156 | * AdSense, ad, sponsor, advertise, banner, pr（Google Adsenseや広告）
157 | * icon
158 | 
159 | 
160 | ## コンテンツ
161 | コンテンツ部分で使用する要素。
162 | 
163 | * about
164 | * staff, member
165 | * menu, shop, online
166 | * work, works, product
167 | * news, event, topic, pickup
168 | * history, archive
169 | * concept
170 | * recommend
171 | * toc, index（目次）
172 | * comment
173 | * contact, inquiry（お問い合わせ）
174 | * access
175 | * map
176 | * sns, social, share（ソーシャルボタン）
177 | * date, time, published
178 | * category, categories, cat
179 | * tag
180 | * address
181 | * tel, phone
182 | 


--------------------------------------------------------------------------------