Drupal CSS is broken when Aggregation is turned on

It's working for me locally. How come this is an issue on dev but not on staging or live? Everything was fine until we merged.

Right, the frontend of your website looks broken, but the backend does not. The chances are, it's something in the frontend theme (might not be, but probably is).

The frontend looks broken, but some of the CSS is working. Sounds like there's a corruption in a CSS file, and things are working fine until the browser gets to the corrupted part.

It's only happening on dev but not on other environments. Great, let's checkout the dev branch so.

It was all fine until "we" merged. Okay, so we have more than one person working on this, and we're not sure exactly who's created the issue. But, if it was all fine until we merged/deployed, then there's a good chance it's a merge conflict marker in your code. 

Where is the corrupted part?

Open your code editor. Do you search for >>>> (git conflict markers) in your theme. Viola!

Other things that could be at issue include a missing semi-colon like this:

.class {
  font-size: 1rem
  font-weight: bold;
}

In CSS the last property in a declaration can omit the semi-colon, but no other property can.

Also check for a missing closing bracket somewhere, like this:

.class {
  font-size: 1rem;
  font-weight: bold;
  
.other-class {
  font-size: 2rem;
}

.even-more-class {
  font-size: 3rem;
}

In the example just above, the .other-class and .even-more-class are now nested classes inside .class since .class has no closing }.

Stay tuned for more "the simple solution is often the best solution" tips.