Hardcoded Spacing Detection

Hardcoded spacing detection identifies pixel, rem, and em values in code that should reference spacing tokens from the design system. When spacing values are specified directly rather than through tokens, they create inconsistency and resist systematic adjustments. Detection enables teams to find and remediate these hardcoded values.

What Is Hardcoded Spacing Detection

Hardcoded spacing detection finds direct numerical specifications of spacing values in stylesheets and styling code. Values like 16px, 1rem, or 24px for margins, padding, gaps, and positioning represent hardcodings when a spacing token system exists. These direct values should instead reference tokens like spacing-4 or var(—space-md).

Hardcoded spacing creates problems similar to hardcoded colors but affecting layout rather than color. Spacing values drift when they cannot be updated centrally. Relationships between spacing values become unclear when each is specified independently. Responsive adjustments become difficult when values are not systematically defined.

How Hardcoded Spacing Detection Works

Pattern recognition identifies spacing value syntaxes. Detection targets pixel values, rem values, em values, and percentages in spacing-related CSS properties. Properties include margin, padding, gap, and their directional variants, as well as positioning properties and dimensional specifications where tokens should apply.

Contextual analysis distinguishes token-appropriate contexts from others. Not every pixel value should be a token; some values like border widths or specific layout dimensions may be appropriately hardcoded. Detection rules must understand which properties and values should use spacing tokens versus which have legitimate hardcoded needs.

Linting integration surfaces detections during development. Stylelint rules with custom configurations can flag hardcoded spacing values. Configuration specifies which properties to check, which value patterns to flag, and what exceptions to allow. IDE integration displays warnings as developers write code.

Allowlist management handles legitimate exceptions. Some values may be appropriately hardcoded due to technical constraints or design requirements. Allowlists document these exceptions so detection does not produce false positives. Exception documentation explains why specific hardcodings are acceptable.

Compliance metrics quantify spacing token usage. Metrics track what percentage of spacing values reference tokens versus hardcoded alternatives. Trend data shows improvement or degradation over time. Metrics inform prioritization and demonstrate progress.

Key Considerations

• Detection rules must distinguish spacing contexts from other numeric usages
• Legitimate hardcoded values need documented exceptions rather than constant false positives
• Spacing token systems must provide values teams actually need to avoid driving hardcoding
• Detection without remediation support provides limited value
• Consistent spacing scales are prerequisites for effective token enforcement

Common Questions

How should detection handle responsive spacing?

Responsive spacing presents detection challenges. Media query-based spacing adjustments may use different values at different breakpoints. Detection must understand whether values at each breakpoint reference appropriate responsive tokens or whether hardcoded values indicate problems. Token systems with responsive spacing scales simplify detection by providing clear token alternatives for each breakpoint context. Systems without responsive token support may require more nuanced detection that allows breakpoint-specific values. Detection configuration should match the token system’s responsive capabilities.

What spacing properties should detection cover?

Comprehensive detection covers multiple property categories. Box model properties include margin, padding, and their directional variants. Flexbox and grid properties include gap, row-gap, and column-gap. Positioning properties include top, right, bottom, left, and inset. Sizing properties where spacing tokens apply include width and height in certain contexts. Transform translations may use spacing values. The specific property list depends on where the organization expects spacing token usage. Over-broad detection creates noise; under-broad detection misses violations. Configuration should reflect actual token usage expectations.

Summary

Hardcoded spacing detection identifies direct pixel, rem, and em specifications that should reference spacing tokens through pattern recognition, contextual analysis, and linting integration. Detection must distinguish spacing contexts from other numeric usages and handle legitimate exceptions through allowlists. Comprehensive coverage includes box model properties, flexbox and grid gaps, positioning, and applicable sizing properties. Effective detection requires spacing token systems that provide values teams actually need for their layout requirements.