I came across an article a while ago, eloquently titled shame.css, written by a bit of a CSS hero, Henry Roberts.  In this article he argues that having a separate file for all of your hacky horrible workarounds is a really good idea, not actually for shaming anyone, but for the following reasons…

• They stick out like a sore thumb
• Your ‘main’ codebase remains clean
• You’re aware that the hacks are very visible
• They’re easier to isolate and fix

Anything that is a hack should go in this file, with detailed comments about why it was necessary, what areas of the ‘main’ codebase is it affecting, and how it could be potentially fixed in future.  Then when you’ve got some spare time or have planned to work on some technical debt, you can come back and try to empty this file.

Since I wrote my recent post on PostCSS partials using Gulp I’ve been thinking again about this idea, and think that a partial stylesheet file is perfect for this use case.

So I can have a partial file called “_shame.css” and all I need to do is add the following into my main stylesheet file…

@import "shame";

Now I put all of my hacky CSS (I don’t have any at all… honestly…) into this file and I can come back and try to fix it all later, when I have more time.

Do make sure that this happens though, don’t just let the file grow and grow in size.  You’ll regret your shame.