Best practices for large-site CSS management

[wienerdog]

I'm working on a fairly large web application that has a very convoluted way of handling CSS.

I was wondering what some of the best practices are for large sites or applications when it comes to CSS.

Is it easier to have multiple CSS files organized by use of the style (layout.css, color.css, type.css, tables.css, forms.css)? Do you further break them down into specific sections of the site (EX: color_login.css, type_login.css, layout_account.css)?

[shalom_m]

I don't know what the "best" practice is, I can tell you what I do.

I have one "standard" CSS file that feals with the general setup, main menu, headers, footers and all the things that are common to all pages.

Then I do the following:
On pages where I have tables I add a "tables" CSS file that configers the backgrounds, fonts and other things that deal with tables.
If I have a group of pages that require a sub-menu or special graphics - say a group of pages for children I will add a "kids" CSS to the "standard".
Pages that need special background like news pages, notices etc... will have a "news" or "corkboard" CSS added to the "standard".
All items that do not fit a specific group of pages will either go into the "standard" if it is not too big alternatively into an "extras" file called when needed.This is what CASCADING is all about.

Here are examples fron one website.

http://www.verulamians.co.uk/index.html

http://www.verulamians.co.uk/leaguemain.html

http://www.verulamians.co.uk/mini_index.html (http://www.verulamians.co.uk/mini_index.html)

http://www.verulamians.co.uk/1stXVReport.html (http://www.verulamians.co.uk/1stXVReport.html)

http://www.verulamians.co.uk/album.html

http://www.verulamians.co.uk/social.html

Note: They all have a common CSS file singleV1.css and with the exeption of the index file, and an additional CSS - or more - to augment the "standard"

Feel free to browse around the different pages and see.

[Drazan]

Usually it's Layout.css and Style.css

Layout takes care of all the positioning

Style takes care of color and images

Sometimes you need another CSS for page specific content - those I run seperately.

Don't forget to organize your css into sections.

/* This is a CSS comment line */


I've run CSS sheets as long as 1,400 lines for complicated sites. As long as the comments tags are in there, I can find everything again when I go to edit.

Jade

[dtwebdesign]

i think you are only causing yourself more trouble by adding too many CSS style sheets. One style sheet is perfectly capable of handling all your needs, so it really depends on how organized you want to be about it.

Depending on the layout of your site... if it is effectively designed, you really shouldn't need an excessive amount of CSS. If I were you, I would focus on elimintaing unneccisary code (because there is probably alot of it).

I say: limit the number of style sheets, organize those that you use, and write clean code... get rid of all that doesn't do anything!

___________________________
DT WEB DESIGN
View my profile on DESIGNHIDE.com - a place for creative designers (http://www.designhide.com/showProfile?ID=1)

[tZ]

Create a common naming convention for elements and concepts within the layout. I would say that is probably the most difficult part of managing a site with CSS. Establishing class and id names that immediately communicate their role and importance within the layout. Another thing I often do is isolate navigation styles and dynamic styles as opposed to ones that stay consistent throughout an entire site. This usually makes it easier to find things latter on. Furthermore, depending on the site generalizing the procedure helps also. For example, if all paragraphs of a specific type are one color than designate a class that specifically handles that as opposed to targeting based on the DOM. If you create classes that handle similar attributes like this changing things will just become a matter of changing the one class style declaration as opposed to searching for every occurence within a style sheet where the color or font needs to be changed. However, to create classes like this effectively you need to have a very well pronounced understanding of the site your developing as a whole. Something I will recommend you avoid is using comments that say what something does. Use comments to say why you are setting a style. Don't regurgitate what the style means. For example, creating a comment that says /* turns text to red */ is pretty worthless when its next to color: red;. Anyone with a half of mind knows that the color is being turned to red. However, perhaps the style is meant to turn a particular part of the document to red or override another style. Its better to comment with regards to these questions that to restate the obvious.

The single most important things that many overlook and take the easy way out(me included) is naming. Naming should relate to the content. If the naming of ids and classes relates to intentions and the content than the styles will become that much easier to manage as opposed to random naming and number based naming(1para,2para). I find this to be single most difficult part of applying styles and managing them effectively.

[wienerdog]

This is really helpful, thanks! It looks like the CSS that's been developed for this web application is just all over the place, with inconsistencies due to the high turnover of different people working on it over time.

I'd like to clean it up and make it easier to manage, with me being the new and sole designer in a team of several developers.

I've done a search and have found 72 CSS files, spread throughout different folders on the server. There's also quite a bit of in-line style that makes organization difficult and a big mess. Many of them manage specific sections of the application, used on dynamically-driven content.

I'm still trying to get a feel for working with a dynamic site using ASP and user controls. It's a lot of looking at a page in Firefox with Firebug, then looking at the aspx code in Dreamweaver, then finding out what user control is being used at the top, then opening THAT file to see what's happening there, etc.

I'm thinking that dividing the CSS based on site sections was a good idea when it was smaller, but now there are so many files to manage to work with the CSS, it's become more complicated by having so many files to manage in different locations. I would think it would be easier to just have a few CSS files that are much larger, and just searching for classes and IDs on a few files instead of handling so many CSS files.

I'm probably going to recommend a few files: layout, type, main nav, and dynamic content (tables and maybe forms).

Will having a smaller number of larger CSS files significantly slow down loading times?

[DesignVHL]

Usually it's Layout.css and Style.css

As long as the comments tags are in there, I can find everything again when I go to edit.

Jade

Exactly. I do one large css file, and use comments to break it up. Such as Headers, footers, styles/colors, even sections. just keep a simple, organized, and descriptive naming system (for the ids and classes) that make sense to you for when you need either apply the styles, or go back for editing. I use FIND when I need to edit a style quickly also.

[wienerdog]

Exactly. I do one large css file, and use comments to break it up. Such as Headers, footers, styles/colors, even sections. just keep a simple, organized, and descriptive naming system (for the ids and classes) that make sense to you for when you need either apply the styles, or go back for editing. I use FIND when I need to edit a style quickly also.

Yeah, that's what I usually do to. With a "find" tool, why would you want to separate your css into more than just several files?

I'm going to have to sort through 72 CSS files and see I can consolidate into several.

Is there an easy way to see if any CSS properties AREN'T being used? Should I use something like Dreamweaver to find the class name, and if doesn't show up, it's probably not being used?

[DesignVHL]

I just can't get over the fact there are 72 css files! HOW LARGE exactly IS this site???? That seems overly excessive!

I'm not really sure HOW to find out what is being used and what isn't. I do use dreamweaver, but I still write most of my html and ALL my css by hand. I rarely use the css dw panels. I can see how, for your purposes, you may need to find a way to see what isn't being used - like in illustrator where you can 'select unused swatches'. But in reality, no one should even get to this point! I understand how crazy a site can get though when there are many people involved in updating and maintaining with no guidelines and standards put into place and enforced.

[NTLemon]

I was working on a website over last summer that had I think 14 or 15 stylesheets. I guess it depends on everything that the website would be needed for though. Aside from Layout and Style its pretty common to have one for Print. Also depending on how many other elements there are there were separate styles for tables, the navigation, etc.

Something I ran into which I suspect is the same problem here is that there is a lot of outdated or dilapidated code. The website I was working on was initially designed by some firm and since that happened no one in the company had really kept it up to date so if they needed to change things they would just append it to the list and comment out old code so most of it could have been slimmed down a lot.

Another way to slim it down is to include all the comments in the stylesheets but for the server version strip out the comments.

It reduces the filesize and the working copy still has all of the comments for yourself or others that might need it.

[wienerdog]

Well, it's not just a site, but a web application. But yeah, it's ugh, a BIT unwieldy trying to manage this many files and makes changes to the CSS on a page.

I'm also an ASP novice, so finding the right content to change in user controls, as well as sifting through to find inline css also makes for a messy job to clean up.

I'm thinking of recommending consolidating to several files, and search/replacing links to the 60+ files that can be eliminated by consolidation.

There were separate folders assigned to each part of the application, with CSS folders in each of THOSE folders. Mix that in with folders for User Controls and CSS files explicitly for them, and that's how it got out of control.

[digizan]

Is there an easy way to see if any CSS properties AREN'T being used? Should I use something like Dreamweaver to find the class name, and if doesn't show up, it's probably not being used?
Take a look at Dust-Me Selectors (FF extension):
http://www.sitepoint.com/dustmeselectors/

digi

[SurfPark]

Have one CSS file and break it up via comments. Web applications can have various style sheets because they have various states (i.e. presentation, processing, results, input) which is very different than a web site which typically only presents static information.

However you decided to do the naming conventions, be consistent. Even if that means being very literal.

[chaospixel]

Thanks all I've found the discussion very useful. I would like to point you at http://developer.yahoo.com/performance/rules.html#num_http with regard to the question of one large css file possibly slowing down a site. According to Yahoo - it might actually speed it up, as the browser has to complete processing a css file before it can open another connection to fetch the next css file.