Learning site for website creation

はじめてのCSS「記述順」

公開日:2021年10月08日 更新日:2021年10月08日

はじめてCSSを練習する方向け。

CSSファイル内にどのような順番で書いていけばよいのか?

一般的な記述順は以下になります。

1.子孫セレクタで場所を限定しながらデザイン

/* 基本デザイン */
/* ============================================ */

/**
 * 要素セレクタ
 */

body {

}

h1,
h2,
h3,
h4,
h5,
h6 {

}

p {

}


/**
 * クラスセレクタ
 */

.inner {

}


/* 共通パーツ */
/* ============================================ */

/**
 * ヘッダー
 */
.header {

}

.header .logo {

}


/**
 * フッター
 */

.footer {

}

.footer .copyright {

}


/* 各パーツ */
/* ============================================ */

/**
 * グループ
 */

.グループ枠 {

}

.グループ枠 .大きなパーツ {

}

.グループ枠 .小さなパーツ {

}

2.BEMを使って場所を限定しながらデザイン

/* 基本デザイン */
/* ============================================ */

/**
 * 要素セレクタ
 */

body {

}

h1,
h2,
h3,
h4,
h5,
h6 {

}

p {

}


/**
 * クラスセレクタ
 */

.inner {

}


/* 共通パーツ */
/* ============================================ */

/**
 * ヘッダー
 */
.Header {

}

.Header__logo {

}


/**
 * フッター
 */

.Footer {

}

.Footer__copyright {

}


/* 各パーツ */
/* ============================================ */

/**
 * グループ
 */

.Block名 {

}

.Block名__element名 {

}

.Block名__element名 {

}