Debugging CSS Before Debugging Tools
Firebug changed my front-end development career, thanks Joe Hewitt for creating it. Before Firebug was around there wasn't much for debugging your code. I remember years ago working on an e-commerce website and having to print out all the code, on physical paper, so I could like match up all the divs. Keep in mind we were using Notepad ++ back then and there wasn't really any other good options. One of the tricks that we did was highlighting the elements with wildcards. You also have to remember we didn't have much for standards back then, shit inline CSS was still acceptable. This saved me more time than I can count.
Visualize HTML Elements
All you had to do is include the code snippet above into your CSS. Save, refresh, and start debugging.
Oh yeah, do you remember those crazy huge dropdown menus we used back in the day. Those were a complete pain in the ass. This was good for that too. Before we had SCSS, our CSS used to look like this.
Examples from the wild
I spent the last 30 minutes trying to find old sites that had poorly written HTML and it was shockly harder than I thought. Here a few, not so great, examples.
Here it is in full effect.
comments powered by Disqus