はじめてのCSS「記述順」
公開日:2021年10月08日
はじめてCSSを練習する方向け。
CSSファイル内にどのような順番で書いていけばよいのか？
一般的な記述順は以下になります。
１．子孫セレクタで場所を限定しながらデザイン
/* 基本デザイン */
/* ============================================ */
/**
* 要素セレクタ
*/
body {
}
h1,
h2,
h3,
h4,
h5,
h6 {
}
p {
}
/**
* クラスセレクタ
*/
.inner {
}
/* 共通パーツ */
/* ============================================ */
/**
* ヘッダー
*/
.header {
}
.header .logo {
}
/**
* フッター
*/
.footer {
}
.footer .copyright {
}
/* 各パーツ */
/* ============================================ */
/**
* グループ
*/
.グループ枠 {
}
.グループ枠 .大きなパーツ {
}
.グループ枠 .小さなパーツ {
}
２．BEMを使って場所を限定しながらデザイン
/* 基本デザイン */
/* ============================================ */
/**
* 要素セレクタ
*/
body {
}
h1,
h2,
h3,
h4,
h5,
h6 {
}
p {
}
/**
* クラスセレクタ
*/
.inner {
}
/* 共通パーツ */
/* ============================================ */
/**
* ヘッダー
*/
.Header {
}
.Header__logo {
}
/**
* フッター
*/
.Footer {
}
.Footer__copyright {
}
/* 各パーツ */
/* ============================================ */
/**
* グループ
*/
.Block名 {
}
.Block名__element名 {
}
.Block名__element名 {
}
同じカテゴリーのコンテンツ
