Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2006-05-29 15:12:58
- Ace of Dubs
- Member
- Registered: 2006-04-17
- Posts: 446
Individual vs Multiple CSS sheets
In most cases, especially when the CSS gets really detailed I prefer a modular structure, much like what PunBB uses (colors.css, layout.css etc)
I know this is more of a personal preference but am wondering what are the benefits / caveats of each, performance-wise?
Offline
#2 2006-05-29 17:15:22
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: Individual vs Multiple CSS sheets
The benefits of separate stylesheets called from a master is the compartmentalization that makes creating the style and maintaining the code for a particulare “module” easy and quick. It also enables the ability to easily swap different styles for sections in and out. It also permits easy customizing of seections which may be slightly different for different pages on a site.
The caveats are that it is of more benefit to a larger or more complex site than a smaller one. It can also become easy to loose track of just what file a particular stlye is set in. As style sheets cascade, you also have to be careful about not accidently modifying styles from a previous module. You also need to be careful about not duplicating ID and CLASS specifiers between sheets. The last caveat is that if you split the CSS up into a master sheet that calls 7 other “modular” sheet files, the server has to make 8 calls to retreive the stylesheet instead of just 1.
I have occasionally used the modular approach mostly for seperating header, footer, menu, advertisment and IE specific style sheets away from the main page content.
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
#3 2006-05-29 17:29:37
- Ace of Dubs
- Member
- Registered: 2006-04-17
- Posts: 446
Re: Individual vs Multiple CSS sheets
Thanks NyteOwl for the concise yet thorough response.
Your explanation has confirmed my suspicions. I am working a relatively large site and think that perhaps having 2 or 3 stylesheets would be the best balance. I did not know about the server calls, so it’s a good thing you schooled me before I made 10 CSS pages..lol!
cheers
Offline
Re: Individual vs Multiple CSS sheets
I’m working on a redesign, and have tried to break out my stylesheets based on the Textpattern structure of the site, as follows:
2006.css is called on the home page, and every page. It contains the basics that are common to almost all pages. I also use conditional comments to send 2006ie.css to all versions of IE except the upcoming v7. That’s it for the home page.
Click on an article page and you also get served 2006comments.css, which contains all the styling for the comment form and the comments themselves, plus any styling specific to an article page.
My templates use the txp:section tag to add the section name as a body id. If you go to any “non-article” section (about, contact, etc.), you get served 2006sec.css, which contains the styling for these secondary sections. There I can use body#section to make declarations specific to that section.
Finally, there’s 2006leg.css, which is legacy code from the nearly six years of odd and rarely used things I’ve tried that are still contained in an article in the archives somewhere. This is only called on article archive pages.
So far this seems to be working well for me (at least in testing, I haven’t quite launched it yet), in terms of being able to easily find whatever declaration I want to edit, and also in feeding a visitor only the incremental bits of CSS needed for the page they’re visiting.
TextPattern user since 04/04/04
Offline
Re: Individual vs Multiple CSS sheets
I’ve got something very similar to Reid’s layout going on. Makes it very easy to hot-swap navigation & form stylings.
- base.css
- navigation.css
- comments.css
- <txp:section />.css
- ie-sucks.css
Edit: I’ve always felt this was a lot, but is totally necessary for my organizational sanity. Does anyone know of any real-world stats on the overhead?
I’ve been pondering writing something that merges several TXP CSS “files” into one file on delivery. Rip some code from ako’s great ako_cssParse plugin and we’ve got ourselves a powerful little doodad.
Last edited by jamiew (2006-06-20 18:40:12)
Offline
Pages: 1