TheGarage Tech Blog

How many times have you looked at a block of CSS being used on your site and wondered what in the heck is going on with all that? Is all that stuff really necessary? Did whoever put all this crap together really know what they were doing? Should I dare modify it?

Though quite functional with CSS technology, I am far from being a CSS expert but after looking at many style sheets I am left wondering what ever happened to the concepts of code reuse (at the very least implying readability,) compactness, and maintainability.

I’ve seen Wordpress themes that come with 2000 plus lines of CSS. Through experience I now tend to avoid those like the plague as they tend to break when upgrading browsers or your CMS software. Clean, compact, straightforward CSS is what you want. Granted, a lot of different fancy web design features will require a lot of CSS and in those instances look for adequate documentation.

If you simply load a nice theme you like with no plans of ever customizing it, these concerns may not seem important. But if you like to continuously improve or customize your site, rule out those themes with unruly style sheets regardless of how much you like how it looks. Follow this advice and you will save yourself a ton of headache down the road.

And speaking of analyzing CSS…

In technology terms, Douglass Bowman’s article Sliding Doors of CSS written way back in 2002 is an ancient document. However, if you are interested in a great CSS tutorial that steps you through the mind-numbing intricacies involved in developing an advanced design feature using CSS the article is one of the best I’ve read. I gained useful insight into the shenanigans used by these CSS gurus to accomplish cool web design layouts.

On the other hand, this excerpt…

Keen eyes may have noticed white tab corners showing up in the previous example. These opaque corners are currently preventing the image in the back from showing through the left corner of the image in front. In theory, we could attempt to match the corners of the tab images with a portion of the background behind them. But our tabs can grow in height, which pushes the background behind them lower, shifting the background color we tried to match. Instead, we change the images, making the corners of our tabs transparent. If the curves are anti-aliased, we matte the edges to an average of the background color behind them.

Now that the corners are transparent, a piece of the right-side image shows through the corner of the left-side image. To compensate for this, we add a small amount of left padding to the list item equivalent to the width of the left-side image (9px). Since padding was added to the list item, we need to remove that same amount from the anchor to keep the text centered (15px – 9px = 6px):

…clearly demonstrates why I don’t create CSS layouts from scratch.