Clean up your CSS!

A couple divs on my page have  properties in common while differentiating on just a few (i.d., font). Maintaing shared property values across multiple elements gets very tiring and confusing.

After some experimenting, I discovered I could combine all the similar stylistic choices for divs pretty easily.

My cluttered CSS has repetition of shared properties in a couple elements . My style sheet was becoming so incredibly long, and I could barely keep the in mind which properties in each element were different and the same:

See? It just repeats the same stuff. I experimented combining the elements and writing all the shared properties once:

By combining the #ids of divs that share the same stylistic properties, I saved so much space on my stylesheet — not to mention headaches.

But it isn’t clean enough. All those margin properties are so annoying to me — and I’m not quite sure how much I need them. I’ve seen lots of beautiful code that didn’t have this problem.

I investigated the margin shorthand. It allows you to put all the margin specifications in one line.

And Holy Hosanah! This shorthand saved me three lines of space! The shorthand property declares each side of the div clockwise:

And here is my CSS, cleaned up!

– Caily Grube


~ by Caily Grube on October 15, 2012.

%d bloggers like this: