class名とCSSについて
CSSでよく使われる単語を分類し、意味や機能を短くまとめています。 初めて勉強するとき、参考にするために本やサイトなどでコードを見る機会がある。 HTMLだと少し変わるだけでほとんど違いはないが、CSSの場合は人によって書き方が様々で異なる。[CSSのクラス名を決めるときに使うリストをつくりました]
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470/ 引用元(詳しくはこちら)
よく使うclass名
・main - 主要な。
・primary - 主要な。
・secondary - 補助的な・第二の。
・tertiary - 第三の。
・quaternary - 第四の。
・common - 共通の。
・global - 全体的な。
・local - 局所的な。
・general - 一般的な。
・site - サイトの。
分類
サイトのページやカテゴリとして使える名詞
・about - 〜について。
・work - 仕事・任務。
・product - 製品。
・service - サービス。
・news - お知らせ・近況。
・event - 行事・出来事。
・history - 歴史・沿革。
・archive - 保存・保管・記録。
・concept - 構想・概念・考え。
・recommend - おすすめ・推奨。
・table of contents - 目次。
・toc - Table of contentsの略語。
・index - 索引・指標。
・contact - 問い合わせ・連絡。
・inquiry - 問い合わせ・質問・調査。
・access - 交通手段。
・shop - 店舗。
・related - 関連のある。
・privacy - 個人情報の利用・保護の方針。
・faq - qandaの類語、Frequently asked questionsよくある質問
・qanda - Question and answer（質問と回答）の略
・input - フォームの入力画面。
・confirm- フォームの確認画面。
・finish - フォームの完了画面。
・search-result - 検索結果画面。検索する
・cart - 購入するアイテムを一時的に保存する画面。
・checkout - 保存していたアイテムを購入する画面。
Block
BEMのBlockで使われるような名詞。
・section - 区分・区画。
・content - 文書の内容。
・article - 記事。
・post - 投稿。
・top - 頂上・上部。
・home- トップページ。
・sidebar - 補足記事。
・wrapper - 内包する。
・wrap - wrapperの略語。
・container - wrapperの類語。容器・入れ物。wrapperはレイアウト的に、containerは意味的に使うことが多い。
・group - 集まり。
・area - 特定の場所・範囲。
・emphasis - 強調・重視。
・catch - 興味を惹く・関心をつかむ。
・note - 注釈。
・description - 概要。
・desc - descriptionの略語。
・introduction - 前置き・導入。
・intro - introductionの略語。
・announce - お知らせ。
・information - 情報。
・info - informationの略語。
・action - Call To Action。重要度の高い。
・more - もっと多くの。
・feature - 主要なもの。
・detail - 詳細・細部。
・summary - 概要・要約。
Element
BEMのElementで使われるような名詞や形容詞など。
inner - 内側の。
outer - 外側の。
body - 主要部分。
head - 上部。
foot - 下部。
heading - 見出し・表題。
title - 表題・題名。
lead - 見出しの補足・記事の要約。
list - 一覧・表。
menu - 一覧・表。
item - （表やデータなどの）項目。
unit - 1つの単位・1セット。
column - 縦列。
col - columnの略語。
text - 本文。
caption - 画像・図表の補足文。
thumbnail - 縮小した画像。
thumb - thumbnailの略語。
avatar - 人の顔を示す画像。
feature - 特徴を補足する画像。
tel - 電話番号。
address - 住所。
date - 日付。
time - 日時。
category - 分類・部類。
cat - categoryの略語。
tag - 識別子。
next - 次の。
previous - 前の。
prev - previousの略語。
mask - 覆い隠す。
overlay - かぶせる・上書きする。
delimiter - アイテムの範囲や境界線を示すインターフェイス。
separator - delimiterの類語で混ぜないように分離する目的で使います。
divider - delimiterの類語でグルーピングするように分割する目的で使います。
Modifier
BEMのModifierで使われるような名詞や形容詞など。
success - 成功。
alert - 注意・警戒。
attention - 配慮・気配り。
error - 間違い・失敗。
caution - 用心・警告。
warning - 警告・予告。
danger - 危険・驚異。
tiny - とても小さい。
xs - tinyの類語でExtra small（smallよりさらに小さい）こと。
small - 小さい。
medium - 中間。
large - 大きい。
huge - とても大きい。
xl - hugeの類語でExtra large（特大・超大型）のこと。
reverse - 反転する。
push - 前方に押す。
pull - 自分の方に引く。
offset - 相殺する・埋めあわせる。
left- 左側の。
center - 真ん中。
right - 右側の。
top - 上部。
middle - 真ん中。
bottom - 下部。
round - 角丸。
circle - 円形。
State
状態を示す動詞や形容詞など。
show - 見せる。
hide - 隠す。
open - 開く。
close - 閉じる。
current - 現在の。
active - 活動中・有効な。
disabled - 無効になっている。
UI利用者に情報を提供するためのインターフェイス。
Text
link - アンカーテキスト。検索する
label - 分類する・項目名。検索する
tag - 符号・識別子。検索する
badge - 残数を示す数値。検索する
copyright - 著作権表示。検索する
tooltip - マウスオーバー時に補足情報を表示するインターフェイス。
button - オン・オフの選択に使うインターフェイス。
btn - buttonの略語。
Image
image - 画像。検索する
img - imageの略語。
icon - 対象の内容や機能などを小さな絵柄で表したもの。
loading - 読み込み中であることを示すインターフェイス。
logo - 社名や製品名などを図案化・装飾化した文字・文字列。
map - 地図。検索する
chart - 理解しやすいような方法で情報を示すリストやグラフのこと。
graph - chartの類語で視覚表現のための手段のこと
hero - キービジュアルになる大型の画像。
banner - （主に宣伝用の）画像をともなうリンク
carousel - 画像などのコンテンツを上下左右にスライドさせて切り替えるインターフェイス。
slider - carouselの類語。
ticker - carouselの類語で自動でアイテムを左右に流しながら表示する。ユーザーは基本的にコントロールできない。
lightbox - carouselの類語で、モーダルのjQueryプラグインのこと。主な用途はサムネイル画像をクリックしてモーダルを開き画像を大きく見せること。
Navigation
navigation - 情報へ誘導するリンク。
nav - navigationの略語。
global-navigation - ほとんどの画面で表示されている主要なナビゲーション。
local-navigation - あるカテゴリ内専用のナビゲーション。グローバルナビゲーションの中や下に配置する場合や、サイドバーに配置する場合がある。
mega-menu - 深い階層のカテゴリやページへのナビゲーション。ドロップダウン（クリックやマウスオーバー）で階層を表示していく。カテゴリやページ数の多いサイトのグローバルナビゲーションに使われることが多い。
breadcrumb - パンくずリスト。トップページから現在ページまでの階層構造を示したリンク
topicpath - breadcrumbの類語。
springboard - 同じサイズのリンクを2×2や3×3のように配置した同じ重要度を持つ並列なナビゲーション。
list-menu - 縦に並んだリスト型のリンクで、階層構造をもったナビゲーション
dashboard - グラフやステータスなどを一つの画面にまとめたインターフェイス。
pagination - 昇順にしたページ番号付きのナビゲーション。
linear-navigation - その画面の前後に移動するためのナビゲーション。paginationとの違いはページ指定ができないこと。
back-to-top - ページトップに戻るためのページ内リンク。
tab - 書類などのインデックスタブを模した、画面内のコンテンツ表示を切り替えるインターフェイス
tabbar - おもに画面下部に固定されたタブで、画面全体を切り替えるインターフェイス。
segmented-control - 機能的にはtabと同じで、見た目がタブではなくボタンである点が違う。
off-canvas - 表示領域外から画面の大半を覆い隠したり（オーバーレイ）、ずらすようにスライドしながら表示するナビゲーション
side-drawer - off-canvasの類語。drawerは「引き出し」の意味。
toggle-menu - 同一の操作で二つの状態を交互に切り換えるインターフェイスで、操作対象になるボタンを基準にナビゲーションを表示することが多い
sitemap - サイト内のすべてのページへのリンクをリスト化したもの。
sns - ソーシャルネットワーキングサービス。
Form
form - 送信フォーム。
login - ユーザー認証をするためのフォーム。検索する
signin - loginの類語。検索する
logout - signout - ユーザー認証を解除すること。検索する
registration - ユーザー登録をするためのフォーム。検索する
signup - registrationの類語。検索する
step-navigation - 複数画面にわたるフォームの順序や、現在地を示したナビゲーション。
search-box - キーワード検索するためのフォームエリア。
text-field - input[type="text"]のような利用者が編集する改行なしのテキストフィールド。
textarea - textareaのような利用者が編集する複数行のテキストフィールド。検索する
checkbox - input[type="checkbox"]のような1つ以上の項目を選択するインターフェイス。
radio - input[type="radio"]のような1つの項目を選択するインターフェイス。
select - selectのような1つの項目を選択するインターフェイス。ラジオボタンと違い、（dropdownのように）項目が最初は隠れているのが特徴。
submit - 送信ボタン。
reset - リセット（取り消し）ボタン。
modify - 修正ボタン。
Other
cards - トランプのような積み重なったカードのメタファーをもつインターフェイス。検索する
dropdown - 複数の項目を表示して、1つの項目を選択するインターフェイス。検索する
pulldown - dropdownの類語。検索する
accordion - 折りたたまれたコンテンツを選択することで表示させるインターフェイス。検索する
scroll-tab - 表示領域よりも横に長いナビゲーションで、左右にスクロールすることで非表示部分を見ることができるインターフェイス。検索する
dialog - （主に）注意や警告を知らせるために使用されるメッセージで、ユーザーに操作を要求するのが特徴。検索する
toast - dialogの類語で、dialogとの違いは時間が経つと自動的に消えること。検索する
popup-window - dialogの類語で、リンク先を別の小さなウィンドウで表示するインターフェイス。検索する
toolbar - ユーザーが利用できるツールやアクションをまとめたインターフェイス。検索する
comment - 記事に対する反応。検索する
table - テーブル・図表。検索する
timeline - チャットや年表のように時系列に並べたリスト。検索する
良いCSSとは
● 予測しやすい
ルールが期待通りであること、意図しないところへの影響を与えないこと
● 再利用しやすい
既存のパーツから新しいコンポーネントを速くつくれること
● 保守しやすい
追加・更新されるとき、既存のCSSのリファクタリングを必要としない
● 拡張しやすい
CSS設計の学習コストが低く、安易に管理できること
代表的な３つCSS設計
・OOCSS
・BEM
・SMACSS
どのCSSの設計手法も、いずれもメリットとデメリットがあり、最も優れたCSSの設計手法というものは存在していない。
一人でコーディングするか、複数でコーディングをするか、状況に応じて変わる。
チームや会社などでルールを作ってコーディングするのがいい。
直観的に見やすくシンプルで短いものがいい気がする(個人的な意見)
OOCSS
OOCSS(オーオーシーエスエス)は、「Object Oriented CSS（オブジェクト指向CSS）」の略語で、 Yahoo!の開発者であるNicole Sullivanによって提唱されたCSSの設計手法。OOCSSは「構造と見た目を切り離す」という考え方をベースにしている。
構造＝レイアウト 見た目＝色やフォントサイズなどレイアウトに影響しないもの。
SMACSS
SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、
それぞれの考え方や記述ルールが取り決められているのが特徴的な手法。
| ベース | レイアウト | モジュール | 状態(ステート) | テーマ |
|---|---|---|---|---|
| 要素そのもののデフォルトスタイル | ページをエリアごとに分割 | 再利用可能なパーツ | レイアウトやモジュールの特定の状態を示す | サイトのルック＆フィールを定義 |
[吉本式BEM設計（BEM設計ベース）]https://tsudoi.org/guide/about/ 引用元(詳しくはこちら)
BEM
BEMとは(Block、Element、Modifier)の略語です。 ・Block (大きいカタマリ) ・Element (大きいカタマリの中の要素) ・Modifier (見た目等で特別に指定するもの)それら3つの要素をCSSの命名に使用するということ。
BEM設計のクラス命名規則
Class名でidは使用しない！Block
(要素の例として、ヘッダー、フッター、ナビゲーション、コンテンツなど)
特に縛りはない。
| (例) | ＿＿でフォントが変わってしまうので| 表で記述した |
|:-----------------|------------------|------------------|
|block | header| footer |
| sidenav | main | content-header |
<header class="header"> </header>
Element
(要素の例として、タイトル、テキスト、ボタン、画像、テーブル、リストなど）
Block名 + __ + Element名
そのエレメントが属するBlockのブロック名を頭に付け、アンダースコア（_）を2つ付けて、>そのエレメントの名前を付ける。
(例) ＿＿でフォントが変わるため 表で記述した block__element header__title footer__table content-header__inner Main__category sideNav__home-button
<header class="header"> <p class="header__logo"></p> </header>
Modifier
Block名 + __ + Element名 + - + Modifier名
モディファイアは、先ほども述べた通り、ブロック、エレメントの状態や装飾（レイアウト)の
バリエーションを持たせるためのパターンを設定ものですので、既存のBlockやElementの
クラス名は保持し、新たにモディファイアのクラスを追加するような設定になります。
| (例) | ＿＿でフォントが変わるため | 表で記述した |
|---|---|---|
| block__element | block__element-state | sideNav__home-button |
| sideNav__home-button-active |
<header class="header header-home"> <p class="header__logo header__logo-large"></p> </header>
以上が、BEM設計のクラスの命名規則です。