Modernizing Component Styling: Refactoring the CardExperience

Maintaining a clean separation between structure and style is one of the most persistent challenges in React development. I recently took a deep look at the CardExperience component in my Portfolio_react project, specifically focusing on how CSS architecture impacts component readability and long-term maintainability.

The Problem: Tight Coupling

Over time, as I added new features to the experience cards, the underlying SCSS had become bloated. The styles were increasingly coupled to the component structure, leading to complex selector nesting and unintended side effects whenever I tried to introduce new layout variants.

I realized that my approach to styling had become reactive rather than intentional—tacking on styles as needs arose instead of following a consistent design system.

The Refactor

To address this, I performed a focused refactor of the CardExperience component. My goal was to decouple the style definitions from the component markup while adopting a more modular approach to my Sass architecture.

Before: Over-nested SCSS

.card-experience {
  .container {
    .header {
      padding: 1rem;
      h2 { color: blue; }
    }
  }
}

After: Flattened and Modular

I shifted toward a flatter structure that leverages variables and distinct component blocks. By isolating the experience card elements into their own partials, I was able to reduce the specificity battles in the browser inspector.

.card-experience {
  display: flex;
  flex-direction: column;
  padding: 1rem;

  &__header {
    font-weight: bold;
    color: var(--primary-color);
  }
}

The Outcome

By flattening the hierarchy, the component styles are now easier to reason about. I also took the time to standardize the spacing using global Sass variables, which ensures that future design adjustments to the CardExperience don't require hunting through deep nested blocks.

Actionable Takeaway

If you find yourself writing CSS selectors with more than three levels of nesting, stop and ask if your component is doing too much. Flatten your styles to improve maintainability and performance. Next time you refactor a UI component, try extracting repetitive styles into shared Sass mixins or variables to keep your codebase DRY.

Generated with Gitvlg.com