| name | reusable-components |
| description | Prefer reusable components and keep globals minimal. Use when adding layout, form, or UI that could be reused, or when adding styles to globals.scss. |
| version | 1.0.0 |
Reusable Components
When to use: Any time you are adding layout, form, or UI that could be reused, or when you are about to add styles to globals.scss (or app-level global CSS).
Principles
- Prefer reusable components over one-off markup and global class names. If the same structure or pattern appears on more than one page (or might in the future), extract it into a component.
- Keep globals to a minimum. Use
globals.scss only for true app-wide basics (e.g. html/body, root layout wrappers like .app-view). Page- or feature-specific layout and styling belong in component module SCSS or layout components.
- Colocate styles with components. Use CSS modules (e.g.
ComponentName.module.scss) for component-specific styles so they are scoped and easy to find.
Examples
- Auth form layout: Use a shared
AuthFormLayout (or similar) component with its own .module.scss instead of auth-specific classes in globals.scss.
- Repeated page structure: If multiple pages share a wrapper (e.g. centered card, same padding), create a layout component that accepts
children and owns the structure and styles.
Checklist
- Am I adding a class to
globals.scss? → Consider a reusable component + module SCSS instead.
- Does this layout/structure appear (or could it appear) on more than one route? → Extract to a component.
