4 posts about css

Favorite Rails tools

Apr 11 2008

Next week I'm sure Rails will be completely pass in favor of Merb (managed by git, of course). But for now, here's the stuff that makes me a happy programmer this weekend:

The Future of CSS is Here .... It's Just Not Evenly Distributed

Dec 17 2007

In light of the litigious, melodramatic backwater that the CSS spec has fallen into, I thought it would be worth writing up a teensy, non-brilliant-but-incredibly-useful DIY hack for stylesheets.

The future is nowIn my mind, there is really no way of getting around CSS if you are working on the web. CSS makes your site ugly or beautiful, rendering a site in just a split second of processing right before your retinas pass information to your brain. I love it; it's one of my trustiest tools. Back in the day I did enough hard time with tables and inline FONT and MARGIN stuff that CSS really was a revelation for me.

So yeah, CSS, I love you, even if you are spooky and crusty and awkward sometimes. And did I mention annoying? Ok sometimes REALLY annoying. ... Sometimes it's late, stuff's completely hosed by SOMETHING in this bloated stylesheet, and I realize that I've just learned to survive on CSS island with a sturdy coconut helmet and strong superstitions about absolute positioning or a negative margin or that extra wrapper div.

That's mostly Microsoft's fault, but besides all the browser bugs, it's really a pretty dumb language. Seriously, what does it take to do a just bit of real vertical positioning without total hackery? And aren't computers good at this whole MATH thing? So why can't I do p { width:(100% - 40px);}

Huh? I'm talking to you, CSS. I would break up with you if my salary didn't depend you.

ANYWAY, there's a good open source philosophy that goes something like "don't bitch without a better idea" so here's three issues that have a solution that I'd like to humbly point out actually have an existing solution.

First, The Solution:

Parse your stylesheets on the server! You can do this in all kinds of languages and frameworks. Hell, you could even do it client-side with javascript if you really wanted to, but for my purposes I'm banging on Ruby on Rails and have fallen in love with the CSS Dryer Plugin which processes the stylesheet dynamically with ERB. (NOTE: READ THAT THERE FULL POST BEFORE JUMPING IN, COWBOY. There's an important bug with comments in blocks.) This is decidedly a Not New Idea. But for some reason it's Just Not Done among most of the developers I work with, who I guess are probably also wearing coconut helmets and carrying around good luck charms. And, let me tell you, this is decidedly one hack that I no longer am without. As long as you are already proficient with CSS it takes about an hour to figure it out, and then you will never look back. Seriously. This is a good one. I don't often write much technical stuff here. Here are the gigantic CSS annoyances that server-side CSS parsing solves for me:

Problem 1: No Variables!

This is a trivial problem really when you start parsing your stylesheet. Most useful for setting a few color variables at the top of the sheet, then you can swap out pallets sitewide. Whiz Bang! Reason enough.

Problem 2: Ridiculous Redundancy

A decent stylesheet has some degree of scope, which makes your stylesheet more readable and your styles most contextual. That is, instead of just saying p {color:fuchsia;} it really is best to have something more specific like div.column p {color:fuchsia;}. But then when you have to repeat the contextual selector (the stuff in front of the p element) every time. So CSS Dryer lets you turn this:

    body#homepage div.column p {color:fuscia;}
    body#homepage div.column p span {color:black;}
into this:
        div.column {
            p {color:fuscia;
                span {color:black;}

WOOO! This is completely DRY code that renders into exactly the same thing as above before it hits the browser. So this example actually adds a few lines, sure, and it looks more complicated at first, but trust me, this is MONEY. On a stylesheet for a decent size application I ended up with about 25% fewer lines. This is great and all, but the real benefit of having every style nested in its proper context is actually solving ...

Problem 3: Stylesheets Get Really Bloody Complicated for Big Sites and Teams

Have you ever been on deadline and cranked out a big stylesheet at 3am and then had to come back to it in a month and actually make a tiny change, only to realize that hey, look, it seems like this should work, but somehow the damn padding on this div is being set in three places, and when I fix it the good and proper way just makes things go ALL to hell and now for some reason I've got to put negative freaking margin on this thing but it looks right so I guess I better get back to real work? I hate that. I write bad CSS. A lot. I'm busy and dumb. And it's maybe that I'm just distractible and impatient but dammit I'm gonna blame it on the fact that this stylesheet is HUGE and I'm tired and I can't Firebug this page enough to find all the relevant styles. You could also blame it on the other dorks on your team who don't use the same organizational rules that you've been using for years.

Nested CSS fixes this junk COLD. Take an afternoon and rewrite the project you're on with nested CSS and you will have a stunning beauty of a stylesheet in which EVERYTHING has it's place. You feel like a samurai when you come back in a month. That style is set in ONE place. It won't save you from IE, but you feel like you're back in touch with the craft.

Web Design: Learning to Problem Solve with Mezzoblue's CSS Crib Sheet

Dec 16 2005

Learning to use CSS can make you insane if you don't have a good instructor. And who does?

Some of the best advice I've ever gotten about web communication relates to debugging your code: you have to learn to problem solve efficiently.

Enter Mezzoblue's CSS Crib Sheet, may it's url never expire.

You will no doubt come across many quirky layout issues when building a site with CSS. You'll end up banging your head against a wall time and again. This is an attempt to make the design process easier, and provide a quick reference to check when you run into trouble.

I also recommend the attendant conversation, which has whole shmear of mostly excellent advice (I don't recommend removing your DOCTYPE permanently, as one contributor recommends. Everything else is golden advice on this page.)

Some Web Design Books Are Dangerous

Mar 29 2005

I recently picked up a copy of the "for Dummies" CSS tutorial book and was disappointed to find the following in a section about using named vs. hex color values (like cornflowerblue instead of #6495ED):

"... my advice is to just assume that pretty much everyone who'll see your web page uses IE [Internet Explorer]. Why? Because most everyone does use IE." p. 79 CSS Web Design For Dummies, 2005

Thankfully, our dear author is misinformed, or simply addled. Unfortunately, the sentiment that "only Internet Explorer matters" is a popular one still. New webmasters please be 'ware: there are alternatives to Microsoft IE, most notably Firefox which has more than 25 million downloads and is now reported by the W3C to have nearly 20% usage on the internet. That's a lot of people who will be seeing a screwed up page if you only test your work in IE.

Apparently, people want to test and develop in IE because it simplifies life. "Your job is much easier," writes the Dummies author, if you only design for IE6. Indeed, browser conflicts are tough to deal with as a web developer. But let's get things straight: Internet Explorer doesn't follow standard CSS rules, which makes everyone's life much more complicated. Read all about the problems (and yes, the necessary workarounds) at www.positioniseverything.net.