記述順番

以下のような順番で定義します。

.component-name {
	/* 1. 変数定義 */
	/* 2. コンポーネント自体のスタイル */
	/* 3. 疑似要素 */
	/* 4. 状態変化（※） */
	/*    4-1. メディアクエリ */
	/*    4-2. 疑似クラス（:hover :disabled :nth-child :empty など） */
	/*    4-3. 属性 */
	/*    4-4. 状態クラス（--[状態]） */
	/* 5. エレメント以外の子孫要素（タイプセレクタ） */
	/* 6. 結合子セレクタを利用したエレメント以外の子孫要素（E+E E~E など） */
	/* 7. 子孫要素に影響のある状態変化 */
}

.component-name__element {
	/* エレメント */
}
/* EOF */

また、プロパティについてはStylelintの設定に基づいて種類順に記述します。

👮‍♀️ 自動検知

このルールはStylelintによって警告されます。

クラス名の例外

JavaScript のライブラリの利用など、クラス命名規則に当てはまらないセレクタにスタイルを当てないといけない場合があります。その場合は、.stylelintrcファイルにてselector-class-patternを変更してください。

.c-hero {
	/* ⚠️ 通常はStylelintによる警告がでる */
	.any-js-lib-class-name {
		/* declaration */
	}
}

.c-hero {
	/* ✅ .stylelintrcの設定変更によって警告がなくなる */
	.any-js-lib-class-name {
		/* declaration */
	}
}