Organize CSS systematically

When working with CSS/SCSS, prioritize organization and avoid duplication by following these principles: 1. **Extract related styles into dedicated files** - Group thematically related CSS rules (like motion controls, accessibility overrides, or component variants) into separate SCSS files and import them centrally for better maintainability.

copy reviewer prompt

Prompt

Reviewer Prompt
Deploy Agent

When working with CSS/SCSS, prioritize organization and avoid duplication by following these principles:

  1. Extract related styles into dedicated files - Group thematically related CSS rules (like motion controls, accessibility overrides, or component variants) into separate SCSS files and import them centrally for better maintainability.

  2. Leverage existing component styles - Before writing new styles, check if similar functionality already exists in existing components. Reuse or extend existing styles rather than duplicating them.

  3. Consider all affected elements systematically - When implementing CSS changes (especially broad ones like accessibility features), identify and address all related UI elements that should be modified consistently.

Example of good organization:

// motion-control.scss - dedicated file for motion-related overrides
@media (prefers-reduced-motion: reduce) {
  .fa-spin,
  .icon.spin,
  .status-icon--spin,
  .argo-button,
  .application-resource-tree__node-animation,
  [class*="sliding-panel"],
  .argo-dropdown__content,
  .tippy-popper *,
  .Toastify--animate {
      animation: none !important;
      transition: none !important;
  }
}

This approach keeps styles organized, reduces code duplication, and makes the codebase more maintainable.

Source discussions