見出し画像

私的ノートの共有：CSSの命名で使える英語まとめ

kid



英語一覧に入る前に


この英語リストはBEMの特にEやMで使えるものをまとめています。



BEMとは


・B（block）
　→もの（名詞）、ボタン、グリッド、タブ、見出し、画像など
・E（__element）
　→中身（名詞）、子孫要素、タグ名、タイトル、画像、テキストなど
・M（--modifier）
　→状態、形容詞
という形式でCSS名をつけます。

※単語は省略しない
※BEMは単語を「-」 「_」を1つでつなげます。
　が、私は単語をローワーキャメルケースにします。
　「block-name」→『blockName』



BEM例


実際に書くとこんな感じ。

.block
.block__element
.block--modifier
.block__element--modifier

さて、おまたせしました。英語一覧です。



elementに使用する単語


・inner：内包する囲み
・outer：外枠
・head：上部
・body：主要部分
・foot：下部

・headingLv：h1～h6

・hero：ファーストビューの印象的な画像
・background：背景
・thumbnail：サムネイル
・figure：イラスト・図
・picture：写真
・logo：本サイトのロゴのみに使用する
・icon：アイコン（他サイトのロゴ）
・image：上記で指定できない画像
・video：動画

・caption：画像や表につく補足文
・note：補助的な文章,何かの情報に付随する文章に
・text：文章
・title：タイトル
・subTitle：サブタイトル
・lead：リード文
・mention：言及、軽く触れる
・special：格別の

・column：縦列
・row：横行

・list：一覧（ul、ol）
・item：liタグ
・definition：dl
・team：dt
・description：dd

・link：リンク

・card：カード状のもの
・tooltip：ヒント、ふきだし

・HTMLタグ名：inputやlabelなど単語と意味が読めるもの
　（検索性が下がるので使わない方が良い）
・button：ボタン
・toggle：ON、OFFする機能をつけるもの
・switch：ON、OFFする機能をつけるもの
・accordion：開閉機能をつけるもの



modifierに使用する単語


・alert
・small
・large
・left
・right
・top
・middle
・bottom
・normal
・isActive
・isShow
・isHide
・isOpen
・isClose

随時、更新していきます。



あとがき


BEMについてもう少し補足。



BEM基本ルール


・1つのタグに1つのclass（シングルクラス設計）
・css指定でidを使用しない
　- どこでも複数使用可能にする
　- jsとアンカーリンクでHTMLのみ記載可
・広域になるHTMLタグ指定しない
・「element」と「modifier」を単体利用しない
　- 他のblock名の配下で使用しない
・ul→li→ul→liの高い層でもelementは多階層とならないよう命名する
　- ul(block)：nav
　- li(element)：nav__item
　- ul(element)：nav__child
　- li(element)：nav__childItem



BEM記述方法


.boxというblockに背景色をつけたパターン

.box {
 display: block;
 padding: 1em;
}

block自体ではなく、blockに背景色を持たせるためのmodifierを作り

.box--highlight {
 background-color: gray;
}

マルチクラスで指定

<div class="box box--heightlight"></div>

基本的にリセットしていくよりも、足していくように管理（↓NG例）

/* NG */
.box {
 display: block;
 padding: 1em;
 background-color: gray;
}
.box--no-highlight {
 background-color: transparent;
}

という塩梅です。