Test-Driven React

Getting Started with Styled-Components

As apps grow, they can contain thousands of style rules—too many for a single person to keep track of. This leads to unintended conflicts. For example, which of the styles below will apply to a disabled button with the white class?

// StylesheetA.css
button.white {
  background-color: white;
  color: black;
}

// StylesheetB.css
button:disabled {
  background-color: grey;
  color: darkgrey;
}

The answer is that it depends on the order the stylesheets are loaded in, as both selectors have the same level of specificity. This is a very fragile state of affairs for a complex app. Worse, removing style rules becomes a risky endeavor. Let’s say that your app has this style rule:

p.alert-message {
 color: ...