Drupal CSS is broken when Aggregation is turned on
Here's some tips for debugging broken CSS in Drupal.
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.
Join the "Something nice ..." newsletter
The full title is "Something nice, something quirky, something else".
I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).