Comments on: Tidy up your stylesheets

By: Review of PSD2HTML: PSD to HTML Service | Devlounge

Review of PSD2HTML: PSD to HTML Service | Devlounge — Thu, 03 Sep 2009 16:30:45 +0000

[...] code was nice and clean- I always appreciate commented code- and the CSS, while not necessarily as organized as my own, was tidy and easy to understand. And here’s a side-by-side comparison of the original PSD [...]

By: WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS?

WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS? — Sat, 18 Apr 2009 01:17:03 +0000

[...] Tidy Up Your Stylesheets – Lorraine Nepomuceno New! [...]

By: Pages tagged "tidy"

Pages tagged "tidy" — Sat, 28 Mar 2009 23:07:08 +0000

[...] bookmarks tagged tidyHave you been ripped off by the Video Professor recently? Tidy up your stylesheets | Devlounge saved by 4 others potheadpotty bookmarked on 03/28/09 | [...]

By: John Faulds

John Faulds — Wed, 14 Jan 2009 12:28:06 +0000

there is very little chance of pulling one’s hair out while wondering why that font won’t change size or begging that sidebar to please, please move 20 pixels to the right

Use Firebug; keep your hair.

By: Ben Hayes

Ben Hayes — Tue, 13 Jan 2009 10:30:51 +0000

I always use headed sections in my stylesheets. The problem often then becomes deciding whether a rule goes in one section or another. Some styles are clearly global, like setting the default font and line-height. Others can easily be assigned to a particular section – say the padding on #content or #footer. But what about making a font tweak in the #footer? You might want to put that in the #footer section, but what if that style is best shared between #header and #footer because it applies to both? And there’s something to be said for having all typography styles in the same place, so it’s easy to make global changes to the typography – but that takes a lot of discipline. In practice I think you’ll always end up relying on ‘find’ in your editor.

By: Niels Matthijs

Niels Matthijs — Tue, 13 Jan 2009 08:24:37 +0000

While there are some useful tips here, I think indenting is not a good idea when writing a stylesheet, though it depends on how you organize it in the first place. I like writing all my declarations belonging to a selector on one line. This can become quite long in length, so indenting actually sends part of my css off the screen.

I myself usually use three levels of headings. One for main sections in my css file, one for components and one for component variants. Probably better illustrated with a picture:

http://users.telenet.be/onderhond/css-file-structure.png

Anyway, apart from the clean look it also helps with finding elements even without using firebug and other tools. It makes your css files more predictable and easier to work with for third parties.

Good article.

By: Max Design - standards based web design, development and training » Some links for light reading (13/1/09)

Mon, 12 Jan 2009 22:26:17 +0000

[...] Tidy up your stylesheets [...]

By: Shirley

Shirley — Mon, 12 Jan 2009 02:56:32 +0000

Um.. I hate tabs.

I don’t like inflating code and remove whitespace wherever I can. Besides, its easier to look at things without tabs, as you can see more without scrolling.

For projects, I usually have nice little sections. I don’t often use titles unless I am handing something off to someone else that I haven’t worked with because my names for IDs and Classes are obvious. For example, navigation might be #nav. Sidebar is #sidebar. etc…

And in the CSS on my site, I’ve removed all whitespace. So it’s a bit scary to look at. Fortunately, I am very familiar with it. And a simply ‘find’ enables me go to whatever I am looking for.

As for a master stylesheet, I think that I will start to employ that. I get completely irritated when someone goes in and pokes around in code and destroys the few things that they should NEVER touch. So a master stylesheet would be great for separating “DON’T EDIT!!!” from “Can Edit”. haha. …definitely a good idea.

Nice tips.

By: Lorraine Nepomuceno

Lorraine Nepomuceno — Sat, 10 Jan 2009 09:43:25 +0000

Nick, thanks- a Table of Contents on every stylesheet would definitely make a lot of designers happier

Chris- that one-line is excellent indeed, and one I use a lot. But many times I don’t like what it does to my form styles.

By: Chris

Chris — Sat, 10 Jan 2009 06:15:54 +0000

Even on complicated markup, I’ve never needed to use a master stylesheet to achieve cross-browser compatibility. I find it often is as large as my CSS (if not larger!) itself. Aside from a few typical IE6 bugs (IE, double margin), a simple one-line reset seems to do the trick.

* { margin: 0; padding: 0; }

By: Neko

Neko — Fri, 09 Jan 2009 17:52:00 +0000

You should also add onto #2 by creating a table of content at the top of your stylesheet.

/* Site Table of Contents
1. Base Styling – What can be found in this section?
2. Page Constraints
3. Header Styling
4. Generic Classes
….etc
*/

This is helpful for you, but also for the next developer to come along. On occasion also supply a one liner explaining what can be found in the section. Now for you byte crunching developers this will add a couple KB’s in the mix.

This is something I do for all my sites and the clients really appreciate it.

Nick