コーディング中にいつも悩まされる問題…それはクラス名を考える時!
ざっといつも使っている単語と他のサイトなんかでよく使われている単語をあつめました。
これで作業効率アップアップ!
ブロック名
| head | |
| header | |
| main | |
| hero | mainと同じ意味合い。最近よく日本語サイトでも見かけるようになりました。 |
| footer | |
| page | 詳細ページの意味。 |
よく使いそう
| sub | |
| large | サイズの大。 |
| small | サイズの小。 |
| prev | |
| next | |
| local | |
| global |
ブロックを囲む
| inner | |
| outer | |
| block | |
| group | |
| body | |
| grid | |
| col | |
| content | |
| card | |
| article | 記事、本文。 |
| section |
機能名
| nav | |
| tab | |
| heading | |
| lead | |
| intro | |
| list | |
| item | |
| slider | |
| banner | |
| add | |
| title | |
文章
| caption | |
| description | 記事の説明文。 |
| summary | descriptionよりも意味合いが低い。 |
| note | 文章の備考的な意味。 |
| text | テキスト。他にはtxt。 |
画像
| logo | |
| thumb | サムネイル。他にはthumbnail。 |
| img | 画像。image |
| icon | アイコン。 |
フォームとかで使いそうなもの
| button | |
| search | |
| input | |
| textarea | |
| label | |
Modifier(属性)のサンプル
| –is_active | |
| –is_disabled | |
| –is_visible | |
| –is_hidden | |
| –is_opened | |
| –is_closed | |
これでコーディング時、悩む時間を削減して作業効率アップ!を目指しましょう!