Comments on: How To Organize CSS Files?

By: Learn Web Design: Educational Resources for Beginners | My Marketing University | MyMarketingU.com

Tue, 11 May 2010 15:46:51 +0000

[...] How to Organize CSS Files [...]

By: Learn Web Design: Educational Resources for Beginners | pro2go Designs Blog

Learn Web Design: Educational Resources for Beginners | pro2go Designs Blog — Mon, 19 Apr 2010 23:53:40 +0000

[...] How to Organize CSS Files [...]

By: Steven Bradley

Steven Bradley — Mon, 12 Apr 2010 16:22:43 +0000

Seems like a good way to organize. The part that always gets me is something like font-family for comments. Say you decide the font for comments will be different than the rest of the page. Would you want to include the new font-family in typographic styles or in the specific section on comments?

I can see advantages to including it in either place.

I guess there’s not going to be a perfect system of organization and the best thing to do is to be consistent.

By: WebmistressM

WebmistressM — Mon, 05 Apr 2010 18:37:06 +0000

In the start, I never questioned organizing my CSS based on design. I would always start my style.css like this:

/*
Theme Name:
Theme URI:
Description:
Version:
Author:
Author URI:
Tags:
*/
/* Table of Contents:
1. Base Font, Text & Colors
2. Layout
3. Post/Page Content
4. Comment/Pingback Properties
5. Search Bar/Box Properties (optional)–NONE
6. Wordpress Calendar
7. WP-Specific Classes
*/

It seems like its a good working model as it is kind of a hybrid between the aspects you mention. The way I see it, you will always have div IDs for each area of the site. The calendar function that wordpress provides is optional, so you dont always need 6 or 7.

Most widgets and plugins that have styling rules use a css file within the plugin/widget folder so you almost never need to add a #8. Either way, this organization has helped me in knowing all the kinds of styling I might need for wordpress but they are organized in such a way that I can abstain from including areas I dont need in a specific theme such as the wordpress calendar styling.

By: Ali

Ali — Mon, 18 May 2009 15:48:49 +0000

Thank you for sharing this info..

By: Steven Bradley

Steven Bradley — Tue, 05 May 2009 07:47:25 +0000

I usually leave everything in one css file too, though I may start using multiple css files for a project to make things easier to manage.

By: Bryan P

Bryan P — Tue, 05 May 2009 04:21:10 +0000

There have been times, I have even considered separating the CSS into different files.

I havent convinced myself this is a good practice, so I only think about it, when I am doing major changes to a site.

By: Steven Bradley

Steven Bradley — Sun, 03 May 2009 09:02:18 +0000

I think that’s the better approach and it’s about time I changed the way I organize my css. I’m a creature of habit and haven’t updated it awhile.

One thing I’m still trying to work out is where to place certain css. Like the border property I mentioned. Should I pull out the color from the shortcut or just leave the entire border css together in one place. I’ll go with my gut and adjust over time.

The webdeveloper toolbar is the one that gets the most use for me on Firefox. Lately I’ve taken to using Safari more and I’m having to use a different set of plugins. Sadly some I really like on FF have no Safari equivalent at the moment.

By: Bryan P

Bryan P — Fri, 01 May 2009 15:55:05 +0000

I like organizing around design. My files are generally have comment blocks which indicate whats in that area. At the top I have a big block that “indexes” the css blocks.

If I need to change a font size, color, etc, I can get right to it without having to think, how is it structured on the page.

The webdeveloper plugin for Firefox, makes this even easier as it tells you the line that CSS element is on.