CSS for each section

ARW VISIONS · #1 07-06-2010, 03:16 PM

So i thinking that since there is 5,000 lines of code and you don't need half of it I would re-work the CSS.

So Im thinking about having different style sheets for each section, and then putting an if statement in css_service.tpl.

So a style sheet for the home page, categories, product, cart... etc.

This would make the CSS much less, but would also greatly increase maintenance by having to update more style sheets.

Any suggestions, or ideas on how to improve the CSS for x-cart?

Ash

Shamun · #2 07-06-2010, 04:25 PM

Having a seperate style sheet for each page would increase overhead and ultimately alot of the styles would be repeating, so why not just use one?

ARW VISIONS · #3 07-06-2010, 06:55 PM

Isn't that why the dang thing is 5,000 lines long in the first place? All the sectionsa re combined into one style sheet.

ARW VISIONS · #4 07-06-2010, 07:03 PM

For example, for your home page, 80% of it is not used. There has to be a solution to this.

ARW VISIONS · #5 07-07-2010, 04:38 PM

Any suggestions? seem to me like most of it never used any ways? should I just go thru and clean it up?

Jon · #6 07-08-2010, 11:23 AM

The best way to clean it up would be to rewrite it all entirely. The safest way to clean it up is to break it up as you've specified but have a core style sheet for common styles. So you'd end up with:
common.css (layout)
product.css
cart.css
category.css
etc.

Each page would have 2 css files (common + supporting file) containing CSS that is actually used.

main.css is the func.php of x-cart verions < 4.0 in terms of bloat.

Sisom · #7 07-11-2010, 04:33 PM

I don't see why you shouldn't just use one CSS file for the entire site, and use comments in the CSS for each section.
I believe that there are 5,000 lines in the main.css file because it covers all the different templates that come free with X-Cart - is that correct? If it is, it seems like the wrong way to do it - a better way would be to have a separate CSS file for each template, and only call the CSS file which fits each template.

balinor · #8 07-11-2010, 04:40 PM

Yea, it is severe bloat. I've cut it in half just by removing duplicate, obsolete or poorly written classes. I also stripped out all of the add-ons and put them in separate stylesheets. Of course, I need to do this all again for 4.3 and 4.4. Fun fun.

ARW VISIONS · #9 07-11-2010, 04:43 PM

Yes it's a bit annoying how screwed up it all is.

gb2world · #10 07-14-2010, 09:34 PM

Hi Ashley -

How about this approach:
1 - Start out with a css reset
2 - Strip out all css associated with modules and addons to their own unique file. So any css associated with a module which can be enabled or disabled in the administration's module page has its own css file. (FLC is treated as an addon - not its own css file.)
3 - The individual css files are enabled/disabled in css_service.tpl depending upon if the module is enabled or disabled in the cart.
4 - The cleaned up reset/main.css file is loaded first - at the top of the cascade
5 - The module css files are loaded next
6 - Any required skin/template css file is cascaded on top after that
7 - A clean css is loaded where the individual designers can add their own css if they want to minimize changes to your standard files.
8 - When the site goes into production mode - an addon that aggregates and compresses the css files is applied (or you have to do it manually)
9 - Browser adjusted css files are cascaded last based on the browser in play - I am not sure if these can be aggregated since they are loaded at run time based on the browser - but they can at least be compressed. (Should not be too big anyway)

10 - To debug - you have the ability to go back and load the original css files

(I think this is close to Balinor's method - except that maybe the aggregation and compression could be added to the flow.)