How do you dress (your CSS)?

[Shovel]

Here in the interests of replacing Joomla tech support with some meatier discussion on Web Development best practices, how to you arrange your CSS file(s) when building a new site?

At present, with an inherited Wordpress template I'm stuck with a bit of cludge and have a single 'style.css' and a couple of overrides in a <style> block in the head. However, that is so far from my ideal that it makes me feel dirty just describing it.

More idealistically, my arrangement goes like this:

The HTML document(s) link to a single CSS file for all media types. This isn't 100% efficient for bandwidth, since @media switching is done after downloading the file, but I find it makes reuse of styles much easier. On occasion I might separate print stylesheets out completely if they are to have a completely different look.

Then it works like this. The first stylesheet (linked to from the HTML) contains colours and borders. Because it's linked in the most legacy-friendly way, it will be interpretted by all browsers back as far as Netscape 4.

The actual layout for the page is loaded up using @import, since Netscape ignores. This way I can use a advanced CSS layout for modern browsers that degrades nicely back to single column display in Netscape.

There're two more CSS files: One for typography and another for hacks. By keeping hacks separated, it allows some degree of cleanliness in the other files, and means there's only a single point-of-failure should a browser hack cease working or cause problems elsewhere.

I avoid using <style /> elements in full sites, since that defeats the purpose of separating content and presentation, although it is useful if creating a single-file demonstration for something. I absolutely refuse to use hacks in my mark-up, though (conditional comments be damned).

Finally, I never name any of the files 'style.css'. It's generic to the point of useless. As much as a 'CSS Stylesheet' is already a redundent abbreviation, 'style dot cascading stylesheet stylesheet' goes too far. I tend to give the initial file a 'theme' name (often just the name of the site, so 'benward.css'), and then layout.css, type.css and hacks.css respectively.


How do you roll yours?

 

[MKJ]

if I knew wot the hell you are talking about I would answer. Where you learn all this s*** . Seriously what is your background cos you are one of the most if the most knowledgeable website designing guy I have come across.

My website skill are along the lines of - 'rip that bit out of there and shove it somewheres else and see if it does what I think it might'. No idea really and as far as validation is concerned - well I never concern myself with it. Not even sure what it is.

Anyways what is your background to all this?

 

[Maljonic]

My style sheet arrangment mostly depend on which of my sites I'm looking at, which in turn depends how old it is. The older the site the less I knew about what I was doing, so Maljonic's Dreams has three or four style sheets when it would only have one if I was starting it now. When I first made style sheets they were very basic, pretty much what you can do through Dreamweaver MX, and I didn't even know about giving things an id - so I had a style sheet for the header, one for the main body, and a couple for different pages instead of them all been on the same sheet.

Having said that I recently made a seperate style sheet for those suckerfish menus because I know the guy who owns the site messes around with it himself in Dreamweaver without knowing a lot about what he's doing, so I made a completely seperate file so I can tell him not to go anywhere near it so he doesn't mess up his menus.

I am learning more and more CSS all the time, I find the process quite magical actually, but I still have a long way to go with it in terms of making complicated sites without relying on tables in any way shape or form. The more I learn about CSS though, the more I like it.

P.S. Forgot to add that I always link to style sheets rather than put the CSS on the page, the guy above did this though on his site since last time I worked on it without me knowing, which threw me off a bit for a while.

P.P.S. I've always given the style sheets proper names, partly because I had to in the early days with my foolish three sheets for a page so I knew what was for what, but now it just makes more sense - not just for style sheets but everything, folders, images, pages the lot.

 

[MKJ]

I too drunk to follow it but it looks interesting for sure. Gonna read it when next sober.

Don't worry I not gonna wreck my site - *shivers* - hell it sure is torture though.

 

[Shovel]

My background, hmm… I'm one of those people who knows more about the subject than I actually have to show for it…

Honestly, I've just been doing this a long time now. I've made websites since I was 15, and started working with HTML code instead of WYSIWYG quite quickly. A few years ago I discovered Web Standards and I've been reading the sites of other standards enthusiasts since then. You learn a lot from other people.

I wouldn't think I've done much more than anyone else, I'm just very enthusiastic, and one of the benefits of learning through web standards is that ‘best practice’ techniques like this follow hand-in-hand.

The technique I've described is called the Web Standards Trifle, and is described with some panache by a clever guy named Andy Clarke. Andy's site happens to be a work of pure wonderment as well, and is well worth dissecting if you're looking to learn about CSS layout. He's written up his most recent redesign in some detail, which helps.