DRY-ing up styled-components

Styled-components are fantastic for keeping CSS close to JavaScript components, promoting clean and modular code. However, repeated styles across multiple components can lead to unnecessary code bloat. This article explores strategies for reducing redundancy in styled-components.

The problem arises from duplicated CSS declarations, even with slight variations. For instance, flexbox layouts frequently involve similar code, differing only in justify-content or align-items. Creating separate styled-components for each variation results in repetitive code.

Consider this initial approach:

// component one
const ComponentOne = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

// component two
const ComponentTwo = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

// component three
const ComponentThree = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
`;

This works, but is inefficient. A better solution involves extending a base component:

// flex row component
const ExampleFlex = styled.div`
  display: flex;
  flex-direction: row;
`;

// component one
const ComponentOne = styled(ExampleFlex)`
  justify-content: flex-start;
`;

// component two
const ComponentTwo = styled(ExampleFlex)`
  justify-content: space-between;
`;

// component three
const ComponentThree = styled(ExampleFlex)`
  justify-content: space-evenly;
`;

This approach is cleaner, more maintainable, and reduces code duplication. Changes to the base ExampleFlex component automatically propagate to all extending components. Remember: the base component must be defined before components extending it.

Further DRYing can be achieved by identifying common styles across different UI elements. For example, a navigation bar and footer might share similar flexbox layouts but differ in alignment. Instead of separate components, create a base component and extend it for each specific need.

The as prop provides another powerful tool. It allows applying styles from one component to a different HTML element. This is useful when UI elements share visual styles but have different underlying functionality (e.g., a button and a link styled as a button). By defining a base style and using the as prop, you can reuse styles without duplicating code.

const Button = styled.button`
  // common button styles
`;

const StyledLink = styled(Button).attrs({ as: 'a' })`
  // link-specific styles (if any)
`;

In summary, combining component extension and the as prop offers a robust strategy for writing DRY and maintainable styled-components, leading to smaller bundle sizes and easier code maintenance. Strategically extracting reusable styles into base components significantly improves code efficiency and long-term maintainability.

The above is the detailed content of DRY-ing up styled-components. For more information, please follow other related articles on the PHP Chinese website!