DRY & KISS Principles

How can the DRY principle be effectively applied to CSS-in-JS styling in React components?

const Button = styled.button`
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  background-color: blue;
  color: white;
`

const SubmitButton = styled.button`
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  background-color: green;
  color: white;
`

const CancelButton = styled.button`
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  background-color: red;
  color: white;
`

Create more button components
Use inline styles instead
Extract common styles into a base component or theme
This code violates DRY by repeating common button styles across multiple components. A better approach would be to: 1. Extract common styles into a base button component 2. Use theme variables for consistent values 3. Extend the base component for variations Improved version: const BaseButton = styled.button` padding: 10px 20px; border-radius: 4px; font-size: 16px; color: white; ` const Button = styled(BaseButton)` background-color: blue; ` const SubmitButton = styled(BaseButton)` background-color: green; ` const CancelButton = styled(BaseButton)` background-color: red; `
Duplicate the styles for better specificity

Next Question (5/20)