CSSのclass名で悩みたくない!よく使われてるいる名前(命名)!

CSSのclass名で悩みたくない!よく使われてるいる名前(命名)!

コーディング中にいつも悩まされる問題…それはクラス名を考える時!
ざっといつも使っている単語と他のサイトなんかでよく使われている単語をあつめました。
これで作業効率アップアップ!

ブロック名

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

 

これでコーディング時、悩む時間を削減して作業効率アップ!を目指しましょう!