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.
Section 1.1
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:
<div class="floatLeft width100"></div>
We gain NO benefits over the following, except for a few characters:
<div style="float: left; width: 100%;"></div>
Instead, it makes much more sense to create classes based on the content:
<div class="callout"></div>
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.
Section 1.3
Idea: Keep selectors to a minimum
The 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:
.aux_panel a { }
Instead, you will probably find less issues down the road if you use:
.aux_column ul li a { }
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.
Section 1.5
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:
html {
font-size: 62.5%;
}
body {
font-size: 1.3em;
}
h1 {
font-size: 1.5em;
}
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:
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />
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.
Section 2.2
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.
Section 2.3
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
padding.
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.
Section 2.5
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!
