Tips

Naming tips and ideas for SpiraCSS projects.

Layout

Rule	Notes
Use a single direction for vertical spacing (top or bottom); e.g., use `margin-top` consistently.	Simplifies spacing calculations and prevents duplicates

Class naming

Rule	Notes
*Use `-box` for layout classes within a Block** and, as a rule, do not use relative names such as `wrapper` / `inner` / `outer`.	Example: `.content-box`, `.media-box`

Naming idea

If you standardize the root Block class (defined in each component’s root SCSS file) as <name>-container, the root Block becomes easier to identify and component boundaries are easier to track.

Recommended Stylelint config (optional)

Recommended setup: stylelint-config-standard-scss + stylelint-config-recess-order.
The config below focuses on reducing SCSS + SpiraCSS false positives and includes optional formatting/CSS Modules tweaks.

// stylelint.config.js (ESM example)
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',
  // Exclude shared partials; keep shared keyframes linted.
  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
  }
}

Previous
Workflow