When working with CSS/SCSS, prioritize organization and avoid duplication by following these principles:
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.
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.
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.
Enter the URL of a public GitHub repository