Professional Level CSS

how to program CSS like the big dogs?

[Parlays]

I know CSS pretty well, but I really don't know what to study or how to get to a level where I can create CSS layouts like those used on big sites like ESPN.com or IGN.com?

Can anyone recommend or tell me what makes distinguished professional CSS developer from someone who just knows and is good at CSS?

[Setek]

Hmm... if you think there's a difference between how complex your CSS-P is compared to how ESPN is, then try to match it.

Practice makes perfect, after all :)

Take a screenshot of their entire website. Make a fresh testing area of your own, insert your modular pieces of code you'll require, and get to work :)

If you don't do the modular code thing, then start from scratch! The job is to develop that layout - test it for different amounts of content, images here and there, etc etc... once you're done, try to break it.

Move on to the next complex layout once you're done :)

If you get stuck at any point, take a look at how they did it - jot that technique down, and move on. Next time you encounter the same kind of problem, remember that technique.

[simonuk]

That's a very good way of learning!

A number of jobs I've applied to have sent me (or sat me down in front of) a jpg for a very complex design and I had to create it using pure CSS in a quick a time as possible.

I've spent the last few years ripping CSS to bits and putting it back together to see:

a. How they did it
b. how to improve on it.

Great way to learn!

[Robin_reala]

Have a decent designer :)

When I arrived at my current job the first thing I told the designers was to try more complex & interesting stuff, and to leave the coding to me. It's worked: we now do some really interesting designs that push me beyond anything I did before.

[thesheep]

Even building a very complex page won't get you all the skills, although it is well worth doing.

Some of the skills of CSS only come when you have to do a large site with many different templates. There are ways to structure your CSS that will work better across multiple templates, and some ways that work better in Content Management Systems, for example.

Practice at home is good, but I also recommend just going for it. You can get a lot from learning on the job.

[heisters]

In my experience folks at big (particularly media) sites don't have very good CSS skills. ESPN's isn't the worst I've seen, but the layout isn't actually that complex; it has lots of Flash and images but they're basically laid out in three columns. The page doesn't even validate as XHTML 1.0 Transitional, and heaven forbid you try to resize your font. Lots of big sites like that care more about the way it renders in IE (and sometimes FF these days) than whether their CSS is elegant, well written, and standards-compliant--and rightfully so. But studying them seems to be a better exercise in graphic design than CSS. Although, if you were a real hotshot, you could re-implement their design in 100% compliant XHTML Strict and CSS.

[Xapti]

I don't like lots of the current big commercial site designs...
They still needlessly use tables, cater to IE above all (and sometimes ignore other browsers).

Most of the really elite CSS designers it seems you see designing moderate-level sites (pretty big, but not like a name anyone actually knows), or their own webpages, or stuff. Maybe that's just something I see that's not true.

Something you should realize about the big sites: CSS is the least of their concern. Everything's done in javascript, flash, PHP, and other advanced stuff. You really need virtually no knowledge of CSS to make insanely professional sites. As far as I know, the huge sites like that are made by entire teams of people though... each with specialty areas, like one on server side coding, one on javascript, one who manages/updates site content, etc.

Personally, I prefer uniquely PHP with CSS. It results in lots of capabilities, but nothing too dynamic on the page (that's what javascript is for, mostly). Not very practical to meet the needs of most page DESIGNERS and company leaders of moderate/big names not using JS or flash though.