Pragmatic HTML & CSS
August 10th, 2010With all those great new features coming in CSS3 people are tempted to invent the “ultimate reset.css” stylesheet. But what’s the point? The default CSS rules are sensible and make sense (for example, they format unordered lists correctly). You’ll end up with less CSS to write, and less code to maintain, fewer lines of code all in all, if you DON’T use those those templates.
The best code is code that you don’t have to write.
In fact, here’s the HTML(5) template I use for new projects:
<!DOCTYPE html> <html> <head> <title></title> <style></style> </head> <body> </body> </html>
And that’s it: be pragmatic about this, and don’t overengineer. Whenever you use something like…
<!--[if IE 7]> <link rel="stylesheet" href="really/long/path/to/small/css/screen/patches/win-ie7.css" media="all" /> <![endif]-->
…a kitten dies somewhere. In most cases, the win-ie7.css file is probably empty or contains only a handful of special rules.
There are perfectly good CSS hacks that you can use, like:
* html div.blah { /* something for IE6 */ }
*+html div.blah { /* something for IE7 */ }
div.blah { color: #0FC\0/; /* IE8 */ }
Yeah, not quite beauties either, but at least they keep your HTML clean from those super-ugly, totally weird conditional comments, which quite mess up your code. Just stick those rules at the end for your stylesheet file or inline ’em, if you have a short stylesheet or a one-pager.
Why do that? The stylesheet declaration above alone takes up 129 precious, precious bytes. It’s for just one version of that browser-like software that is called “Internet Explorer”. That’s more bytes than all of those three hacks combined (including the comments)—and they support 3 versions of IE.
At the end of the day, no one will judge your web sites and apps by how beautiful you include IE workarounds, but they will by how fast it loads.
Be pragmatic.
Tweet
