Tips

SpiraCSS プロジェクトで役立つ命名のヒントやアイディアです。

レイアウト

ルール	補足
縦方向マージンは上側 (margin-top) に統一し、下側は使わない。	余白計算の単純化と重複防止

デザイン視点で要素は「自分の上に余白を含んでいる」と捉えると縦マージンは上側に置く方が自然という考え方です。
Stylelint 設定については property-placement を参照してください。

クラス命名

ルール	補足
Block 内のレイアウト用クラス名 は *-box を推奨し、wrapper / inner / outer などの相対的な名前は原則禁止。	例: .content-box, .media-box

wrapper / inner は相対構造を含意し構造変更時にズレやすいが、*-box は意味を限定しないので差し替えや分割がしやすい。

命名アイディア

• ルート Block（コンポーネントと同名のルート SCSS のクラス）を <名前>-container 型に寄せるなど、チーム内でルールを決めておくと、コンポーネントのルートが分かりやすくなり、境界を追いやすくなると考えます。

Stylelint 推奨設定（任意）

推奨構成は stylelint-config-standard-scss + stylelint-config-recess-order です。
以下は誤検出を抑える設定を中心に、整形方針や CSS Modules 向けの任意設定も含めた推奨設定です。

// stylelint.config.js（ESM例）
import spiracssPlugin, { createRules } from '@spiracss/stylelint-plugin'
import spiracssConfig from './spiracss.config.js'

export default {
  extends: ['stylelint-config-standard-scss', 'stylelint-config-recess-order'],
  plugins: [spiracssPlugin, 'stylelint-scss'],
  customSyntax: 'postcss-scss',
  // 共通パーシャルは除外し、共有 keyframes は検証対象に含める。
  ignoreFiles: ['src/styles/partials/**/*.scss', '!src/styles/partials/keyframes.scss'],
  rules: {
    ...createRules(spiracssConfig),
    'at-rule-no-unknown': null,
    'function-no-unknown': null,
    'length-zero-no-unit': true,
    'no-descending-specificity': null,
    'no-invalid-position-at-import-rule': null,
    'rule-empty-line-before': [
      'always-multi-line',
      {
        ignore: ['after-comment', 'first-nested']
      }
    ],
    'selector-class-pattern': null,
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global', 'local']
      }
    ],
    'selector-pseudo-element-colon-notation': 'double',
    'declaration-property-value-no-unknown': null,
    'scss/comment-no-empty': null
  }
}

注意:

• selector-pseudo-class-no-unknown は CSS Modules（:global / :local）を使う場合のみ必要です。
• rule-empty-line-before などは整形方針なので、不要であれば削除してください。