Smashing Magazine does an excellent job of providing quality resources for web developers. Today while checking out Digg, I noticed that they have a new article entitled 70 Expert Ideas For Better CSS Coding. The article contains lots of good information on how to improve your CSS, however there are a number of ideas presented that should be taken with a grain of salt.
Idea: Keep a library of helpful CSS classes
This concept really breaks the separation of presentation and content that we strive for when using CSS classes and writing semantic code. If we have some html:
We gain NO benefits over the following, except for a few characters:
Instead, it makes much more sense to create classes based on the content:
Then if you have multiple callouts, you can change all of them with a single CSS rule, as opposed to editing the HTML when you want to change the float or width.
Idea: Keep selectors to a minimumThe rationale for this is to reduce the number of selectors needed to override the rule, and helping keep troubleshooting time down. From my own experience I have found that using specific selectors more often helps with troubleshooting. You’ll first want to start with styling all of your basic html tags, then create specific styles for the sections that override the defaults. If you have auxiliary panel that needs styling for links inside of an ordered list, don’t use:
Instead, you will probably find less issues down the road if you use:
This will especially be the case if you add more links to the right column that are not inside of a list.
Idea: Keep CSS hacks to a minimum
This advice really should read: Don’t use CSS hacks.
CSS hacks break over time, see IE7 for an example. Instead, use valid CSS, and try some different presentation techniques. Most often CSS hacks have to do with IE. Check out Dean Edwards’ IE7 script for info on how to make your life easier with IE.
Idea: To work with EMs like with pxs, set font-size on the body-tag with 62.5%
This is a little dangerous since EMs cascade and pixels don’t. Say I have the following CSS:
As a result my h1s would have an equivalent font-size of 19.5px, not 15px.
Idea: Use universal character set for encoding.
UTF-8 is a wonderful character set, don’t get me wrong, but you have to know more than just including the following inside of your head tag:
If you present your files are UTF-8, but your editor is saving them as ISO-8859-1, Windows-1252 or Mac OS Roman you could have issues for characters above between 129 and 256. Better advice is to make sure you include a meta tag with your actual character set.
Idea: Use the power of selectors
These selectors are awesome, but be very careful! None of them are supported by IE6 unless you use Dean Edwards’ IE7 script. Hopefully this will save someone from developing a whole project in Firefox, Opera or Safari just to see it get destroyed by IE6.
Idea: You can mark external links automatically.
Marking external links is great, but really think twice before using
content:. CSS is about presentation and really shouldn’t be adding content to your pages. Instead, add a background image with a little right
Idea: You can remove dotted links with outline: none;
This seems like a great idea, especially if you use negative text-indent values. The real issue is with accessibility. As soon as you hide the outline, people with keyboards are gonna have no idea what link they have tabbed to. This might be a good time to look and see if a different technique than negative text-indent might solve your issue.
Idea: You can force IE to apply transparence to PNGs.
Idea: You can define min-width and max-width in IE.
Don’t code these into your style sheet. CSS hacks will degrade over time and it makes your CSS all messy. Instead I would recommend using Dean Edwards’ IE7 script to fix issues with only IE, leaving your css nice, valid and clean. The IE7 script also adds support for all kinds of good, usable CSS. Check it out!