Comments on: How To Organize CSS Files?

By: Steven Bradley

Steven Bradley — Mon, 24 Oct 2011 16:30:32 +0000

Glad to help. I haven't tried SASS myself yet. I like the ideas of what SASS and LESS are doing, but there's still something that keeps me from using them. I'm still working out what the best way is to organize css files. Jonathon Snook recently released SMASS, which are his ideas on how to organize css. He has an interesting approach that you may find useful.

By: Lawrence Siulagi

Lawrence Siulagi — Sun, 16 Oct 2011 20:57:48 +0000

Steven, thanks for the info. I’m trying out SASS for the first time and while it’s amazing for its DRY focus, I am still finding it difficult in where to start!

I think the design-approach might suit my needs. I’ll give that a try. -Lawrence

By: Learn Web Design: Educational Resources for Beginners | Vandelay Design Blog

Thu, 11 Nov 2010 12:50:37 +0000

[...] 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.