Values & Units

Font sizes MUST be defined in px for cross-browser consistency.
Colors MUST be referenced through SCSS variables.
Zero values MUST NOT include a unit.
Hardcoded magic numbers MUST NOT be used without a comment.

Introduction

This standard defines how values and units MUST be used across all SCSS files to ensure consistency, cross-browser compatibility, and maintainability.

Font Size Units

Font sizes MUST be defined in px for consistent cross-browser behavior. Browsers may interpret rem and em differently based on user settings, which can lead to unpredictable results.

Fluid typography SHOULD use calc() with px values.

All font size values MUST be defined through variables in _variable.scss.

// CORRECT
font-size: -size__h1;
font-size: calc(24px + (38 - 24) * ((100vw - 480px) / (1600 - 480)));

// WRONG
font-size: 2.4rem;
font-size: 18px; // hardcoded without variable

Line Height

Line-height SHOULD be a unitless ratio: line-height: 1.5 (not line-height: 24px). Unitless values scale correctly with the element font size.

Zero Values

Zero values MUST NOT include a unit: margin: 0 (not margin: 0px).

Colors

Colors MUST be defined through SCSS variables — direct hex/rgb values MUST NOT be used in component files.
When color adjustments are needed (lighten/darken), SCSS functions SHOULD be used: lighten(, 10%), rgba(, 0.5).

Magic Numbers

Hardcoded values (e.g. margin-top: 37px) MUST NOT be used without a comment explaining the reason.

Repeated values SHOULD be extracted into variables in _variable.scss.

Shorthand Properties

Shorthand properties SHOULD be used when setting all sides: margin: 0 instead of margin: 0 0 0 0.
Shorthand SHOULD NOT be used when setting only one side: margin-top: instead of margin: 0 0 0.