File Management

Component @keyframes

Component-specific animations are defined within that component’s SCSS file.

Since @keyframes is global by CSS spec, include the Block name to avoid collisions.

Placement rules

• Place at end of file
• Place at root level (not inside @media / @layer etc.)

Naming rules

• {block}-{action} or {block}-{element}-{action}
• Keep action short and explicit (verb phrase)

Example:

.sample-block {
  animation: sample-block-fade-in 0.3s ease;
}

// Place at end of file
@keyframes sample-block-fade-in {
  to {
    opacity: 1;
  }
}

Shared animations (Global layer)

Animations shared across multiple components are managed in the Global layer.

• Use a prefix like kf- and centralize in keyframes.scss
• Import via alias like @styles/partials/keyframes

@rel comments

Declare parent-child relationships between Blocks with comments for quick navigation between files.

Parent Block

@use "sass:meta";

// @assets/css/home.scss          ← page entry

.home-section {
  @include meta.load-css("scss");

  > .home-hero {
    // @rel/scss/home-hero.scss   ← link to child
  }
}

Child Block

// @rel/../home-section.scss      ← link to parent

.home-hero {
  // ...
}

Page entry

.main-container {
  > .home-section {
    // @components/home-section/home-section.scss
  }
}

Rules

• Parent → child: link to child Block as first comment in > .child rule
• Child → parent: link to parent Block near top of file
• Parent → page: link to page entry near top of file