Comments on: How I Format My CSS Files

By: david

david — Thu, 19 Jun 2008 12:09:22 +0000

@Richard: I used to try to but it got too difficult to maintain. I would put attributes like margin, padding, width, and height first, because they would change most often. Like I said though, it just got too tough.

By: Richard Standbrook

Richard Standbrook — Thu, 19 Jun 2008 09:16:17 +0000

This looks like a great approach, I will give it a go. All attributes on one line seems a little harder to read and manage, I will see how I get on.

@David, do you keep your attributes in a certain order? Alphabetical? As it comes?

By: OrganizedFellow

OrganizedFellow — Mon, 16 Jun 2008 17:15:48 +0000

I (just as everyone else) use similar but slightly different methods.

I have my properties in alphabetical order, it makes it very easy to find what I need.
As for your method, ‘Globals, Structure, Tags, Custom Classes, Links’, it makes absolute sense to have it that way!
I generally kept my ID & CLASS selectors separated from the TAGS. I like your method better!

By: Eric Wendelin

Eric Wendelin — Mon, 16 Jun 2008 17:04:55 +0000

@Matthias:
jEdit has a plugin that allows you to set a background for the edit area.

By: Marouane Marzouki

Marouane Marzouki — Mon, 16 Jun 2008 13:19:24 +0000

Nice way to make a good looking CSS file. I like it, although I still adhere to the idea that one-line selectors and attributes is not that easy and clear for many people especially for beginners when they want to place comments at the end of almost every line (every attribute !!!).
Nevertheless, I like it very very much.

By: jack

jack — Sun, 15 Jun 2008 05:45:26 +0000

very nice post!
How about a post on ‘css the basic stuff you want there?’ :)
It could be one level more deeper then the style of the file – give the reader the option to see what the basic set of rules will do to their web pages.
J.

By: Lynda

Lynda — Sat, 14 Jun 2008 17:39:47 +0000

Thanks for the great post. I keep intending to organize my CSS code, especially now that I’m freelancing full time. But my self-discipline leaves much to be desired! LOL I think your structure makes a ton of sense and plan to use it as the basis for my own DISCIPLINED organization starting today!

By: Mike Liston

Mike Liston — Fri, 13 Jun 2008 02:40:17 +0000

Awesome post! I’ve been doing my css files like this for years and the readability is so much easier. It’s nice you can get the whole “picture” of your css stuff on one screen without scrolling. Anyone who hasn’t tried it, it is worth a go.

By: deef

deef — Thu, 12 Jun 2008 19:16:56 +0000

I follow you on the indenting and sub-indenting and the medias in one file.

The way I like to use a CSS-builder in PHP that gets every css-include I need and generates one file (1 http-request) for the site-wide styling. Before output the CSS is cleaned using CSSTidy.

For easy themes I like to separate classes over two different files. One file containing only structure (width, height, padding, margin, display, …) and one file containing theme styling (colors, backgrounds, cursor, …). CSSTidy will just join them for me afterwards and this way I can e.g. easily adapt my theme to e.g. a christmas theme. Off course CSSTidy only runs once to write the server-side cache.

Should a certain page require additional CSS I include a page-specific CSS-file built in the same way.

By: Rob Allen

Rob Allen — Thu, 12 Jun 2008 18:16:23 +0000

Great post. Its nice to see some other folks out there with opinions on this kind of thing.

I have been separating my styles into logical blocks for a while now but i take it a step further. I typically start with HTML tags, then the structural stuff that’s common across the site, then common/general classes, then I make sections below that for other logical groups with commented headers.

I might have to give the whole one-line and tabbed thing a try.

One other thing I like doing is creating my css as a php page with the colors defined in variables at the top so I can change color schemes more readily as I reuse sheets. It’s also great for demonstrating how the site would look in different widths for clients.

Thanks again.