CSS
記述順番
ボックスモデル・色・フォント順のプロパティ記述ルール
以下のように、ボックスモデル → 色 → フォント → その他の視覚順でプロパティを定義します。
自動修正
このルールはStylelintの設定に基づいて自動的に整理されます。
.block {
/* 1. 変数定義 */
--color-main: #0070f3;
/* 2. ボックスモデル */
display: flex;
width: 100%;
height: 48px;
margin: 0 auto;
padding: 8px 16px;
box-sizing: border-box;
/* 3. 色・背景 */
background-color: var(--color-main);
border: 1px solid #ccc;
/* 4. フォント */
font-size: 1rem;
font-weight: 700;
color: #fff;
line-height: 1.5;
/* 5. その他の視覚プロパティ */
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
/* 6. 疑似要素・状態変化 */
&:hover {
background-color: #005bb5;
}
&::after {
content: "";
display: block;
}
}
自動フォーマット
JavaScript のライブラリの利用など、クラス命名規則に当てはまらないセレクタにスタイルを当てないといけない場合があります。その場合は、
.stylelintrcファイルにてselector-class-patternを変更してください。自動フォーマット
プロパティの順序は以下のツールで管理されます：
- Stylelint: CSS プロパティの並び順を自動整理
- stylelint-config-recess-order: プロパティグループごとの順序制御
これにより、チーム全体で一貫したプロパティ順序が保たれ、可読性とメンテナンス性が向上します。
例外事項
JavaScript のライブラリの利用など、クラス命名規則に当てはまらないセレクタにスタイルを当てないといけない場合があります。その場合は、
.stylelintrcファイルにてselector-class-patternを変更してください。// ⚠️ 通常はStylelintによる警告がでる
.any-js-lib-class-name {
/* declaration */
}
.any-js-lib-class-name {
/* declaration */
}