Organizing and optimizing your CSS files

When writing CSS code, I often use a great program for Mac called CSS Edit. One of the things I like most about it is that they've integrated code "grouping" into their left-side style list. This allows me to code these groups and view them in Windows Explorer-like folders and hierarchies. It's very useful. We're actually putting similar functionality into our product.

I've seen many suggestions on how to write and organize CSS code; everything from sorting alphabetically to the approach I usually take, coding in functional chunks (header styles together, footer styles together, etc.).

One of my co-workers, Shelby, sent me a link this morning to an article in Smashing Magazine - 7 Principles Of Clean And Optimized CSS Code. Give it a read.

They have some great suggestions in there. One of my favourites is to use CSS shorthand. This involves taking the following:
.test {
margin-top: 5px; margin-right: 6px; margin-bottom: 7px; margin-left: 8px;
}

... and coding it as:
.test {
margin: 5px 6px 7px 8px;
}

I like to think of the way the code is read as being clock-wise: the first value represent the top, the 2nd the right, the third is the bottom and the fourth is the left.

As they say in their article, "Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!)." We all know how long some CSS files can get and using this shorthand technique is a great way to shave a lot of that line bloat out of there.

C'mon folks. What are some of your favourite methods of organizing and optimizing your code? Let me know.

PNG Transparency - Unit PNG Fix

This is just a quick follow-up to my post last week. While reading Webappers.com, I came across their write-up on the Unit PNG Fix. Ihad the chance to use it this weekend on a personal project and it worked like a charm.

As they point out on their site, it definitely has its upside:

• Very compact javascript: Under 1kb!
• Fixes some interactivity problems caused by IE’s filter attribute.
• Works on img objects and background-image attributes.
• Runs automatically. You don’t have to define classes or call functions.
• Allows for auto width and auto height elements.
• Super simple to deploy.

The one issue I did come across was the way it treats background images... So, if you're trying to use the navigation sprite (1 image for all images/states), it screws that up. Having said that - if the IE6 PNG transparency issue is something you've been looking into, this is certainly worth a shot.

IE6 and whether or not to validate CSS

Over the weekend, I was doing some work for a friend of mine and came across the annoying lack of support for PNG transparency in IE6. This brought to mind 2 things:

• WHY ARE THERE STILL PEOPLE USING IE6??
• If I use the work-around, the site's CSS will no longer validate properly.

Seriously though... why do people still use IE6? Have they not heard of Windows Update? At what point do we as developers resort to either ignoring IE6 or doing a browser sniff and pointing them to a "Please upgrade your browser" page? What do you folks think?

OK, enough of my rant. Because IE6 is still out there and still has roughly 25% of the browser market share, let's get back to the meat of the PNG transparency matter. When looking to have transparent PNG's display properly in IE, I'll normally resort to using the HTC hack. This is a good thing. The bad thing is that it breaks the site's W3C CSS validation if someone runs the test.

Now you may be about to point out that our site (www.sitemasher.com) uses the hack, but I did not develop our corporate site, so shhhh.

I pride myself on producing 100% compliant sites, so this pains me... but should it? What it comes down to is that the site's code is 100% compliant, except for the included hack code. On their site, the W3C gives reasons for validation, but I'm thinking they don't really apply when you're a knowledgeable developer and know what rules you're bending.

So, I'm asking you folks - what do you think about this issue?

To reset or not to reset - using a CSS reset

Since we're at the start of this blog, why not start off with something that many people put at the top of their style sheets, a CSS reset. There are definitely folks out there who don't subscribe to the reset school of thought. Personally, I'm a fan. I use Eric A. Meyer's CSS Reset.

Now you may be wondering, "What the heck is this CSS reset stuff he's going on about and why would I use it?" Well, let's get into that.

Web browser engines treat various default HTML elements in different ways, resulting in pages looking differently in Internet Explorer than they do in say, Firefox. A CSS reset represents a big step towards easing our way into browser consistency. To put it simply, a reset allows you to start your site with a clean slate, which is consistent across most browsers. Eric Meyer explains the concept very well, so to get the full skinny, go have a read of his post on the subject.

Quite a while back, I would start my sites' CSS with:
* {
margin: 0;
padding: 0;
border: 0;
}

As Jonathan Snook points out, this approach has its negatives. Text boxes and submit buttons would lose their borders, lists would go all wonky, etc. It inevitably led to me having to write more CSS code to work around this method than it was worth.

When you use Sitemasher's style sheet editor, you'll be able to insert a CSS reset at the top of a style sheet simply by clicking "Insert CSS Reset" from a contextual menu. If you don't want it, you won't have to use it. If you want to use another reset, well you'll be able to do that as well by pasting the code into the editor.

There are various resets out there (with Yahoo in the mix as well) and through trial and error, I've found that Eric's works best for me. What do you folks think? What do you use? If you don't use one, why not? Let me know.

Howdy and welcome to CSS Ninja

Hi there folks. Welcome to CSS Ninja. As you may have seen over there on the right, I'm Sean. I'm a front-end web developer by trade and much of the work I've done over the last bunch of years has involved Cascading Style Sheets (CSS from now on), including one job at which my official title was actually "CSS Ninja".

I started using CSS after attending a class at SFU back in 1999 or 2000 when I was at Burntsand, which featured none other than Eric A. Meyer. He opened my eyes to where this new stuff was going and what it could do. Of course browser support back then was pretty bad, but it was high time I got into CSS.

I'm not going to get into my work experience. If you're interested in that, have a read of my bio or email me and ask. :)

Here at Sitemasher, we're building a pretty damn cool product that is going to have a sexy CSS tool built in. So, if you're the front-end developer sort, you'll easily be able to style things up all pretty like and make your customers happy. In the end, that's what really counts. You save time while building and have the flexibility to be able to easily do what you do.

In the coming months, I'll be posting both general CSS-related thoughts, or tips on how to use CSS in our product. I hope you'll check in occasionally and even say, "Hi".