CSS - should it be split up?

So a question I want to throw out to anyone who is interested.

Should we look at splitting up the CSS since page specific CSS is possible? I'm thinking that will actually help folks in finding what they are looking for and making changes - but it's been so long since I started in Zen Cart that I can't put myself back into learning mode. Would this simplify or complicate? Any other reasons why to not do this?

Splitting it up will reduce the size of the stylesheet and encourage better practices in CSS cart work. I know the stylesheet size is not a major issue now but going forward the amount of CSS is more likely going to increase, not decrease.

I personally add new css at the bottom of the stylesheet - most of the time - and make other edits in place. I do not add a secondary stylesheet in to override the default and I rarely ever see that done. How do others handle CSS changes / additions?

I always try to leave the stylesheets in a form that anyone who inherits a site can manage. At my age and after 2 deaths (Clyde & Conor) in the Zen Cart community, I'm well aware that preparing for the next zen cart pro has to be part of my work. So that's why I'm asking about how others do it.

Comments? Questions?

I usually add CSS to the bottom of stylesheet.css on my sites too, but I think mod authors should include a separate CSS file with the mod if possible to effect styling changes.

stevesh:

I usually add CSS to the bottom of stylesheet.css on my sites too, but I think mod authors should include a separate CSS file with the mod if possible to effect styling changes.
Agreed! I create a page-specific CSS file for any new pages that I've created for a given site and for any pages (like product_info) that have a lot of customization (so that the payload of the stylesheet.css file isn't burdened with those page-specific customizations).

I'm slightly confused about the question; however, I have seen a request to have CSS controlled items located/looking different on different pages or types of page (home window versus product page(s)).

Regarding the CSS itself, yes I have been in essence placing the CSS into the file applicable with the displayed item.

The only issue(s) I see is that in almost any way, the modifications provided with a mod are (or should be) typically based off of a fresh install. Any modifications made by other plugins or by the store owner can not be accounted for potentially resulting in the final display not looking as desired by the original uthor upon initial installtion. It's going to be a rather steep learning curve for many, both modders and store owners. Hopefully/maybe a sound "standard" can be developed/applied to help everyone through the next phase of ZC. :)

Maybe it wouldn't be a bad idea for mod authors to place a CSS file, even empty, with a comment including the name and link to the mod. It would help at upgrade time those mod-crazy Zenners who don't make careful notes about which plugins they have installed, or new Zenners who are taking over an existing site.

stevesh:

Maybe it wouldn't be a bad idea for mod authors to place a CSS file, even empty, with a comment including the name and link to the mod. It would help at upgrade time those mod-crazy Zenners who don't make careful notes about which plugins they have installed, or new Zenners who are taking over an existing site.

Thanks for that idea, Steve.

Y'all have answered the question partially - and these are necessary discussions about mod CSS.

But I'm actually talking about taking that default stylesheet and splitting it up so that only non-page specific stuff remains. Going forward - especially with responsive templates and adding more jquery based CSS, that default stylesheet is going to grow. I'm looking to prepare for that eventuality in future versions.

I guess the real question is, if stylesheet.css is split up for page specific reasons, will that make it easier to change the CSS on the site? It's hard to imagine how a newbie will see this - it was way too long ago for me to remember what it was like .

Seems to me that if the stylesheets are named per page, that would make it more obvious where specific CSS resides. But since CSS does depend on the order in which the CSS files are read, would that make it harder to troubleshoot problems? 99% of the time the page specific stylesheet comes (alphabetically) before the stylesheet.com so that CSS can override the main stylesheet.css while on that page. I can easily foresee problems there - but should I worry about this?

Which returns me to the mod CSS. If we do this, then mods would have to all hold the default CSS and changes, negating the idea of new CSS files for mods.

Yes, mc12345678, standards. Let's keep talking everyone!

delia:

Thanks for that idea, Steve.

Y'all have answered the question partially - and these are necessary discussions about mod CSS.

But I'm actually talking about taking that default stylesheet and splitting it up so that only non-page specific stuff remains. Going forward - especially with responsive templates and adding more jquery based CSS, that default stylesheet is going to grow. I'm looking to prepare for that eventuality in future versions.

I guess the real question is, if stylesheet.css is split up for page specific reasons, will that make it easier to change the CSS on the site? It's hard to imagine how a newbie will see this - it was way too long ago for me to remember what it was like .

Seems to me that if the stylesheets are named per page, that would make it more obvious where specific CSS resides. But since CSS does depend on the order in which the CSS files are read, would that make it harder to troubleshoot problems? 99% of the time the page specific stylesheet comes (alphabetically) before the stylesheet.com so that CSS can override the main stylesheet.css while on that page. I can easily foresee problems there - but should I worry about this?

Which returns me to the mod CSS. If we do this, then mods would have to all hold the default CSS and changes, negating the idea of new CSS files for mods.

Yes, mc12345678, standards. Let's keep talking everyone!

Because of the free template packages, I have contact with tons of people who are brand new to css. I would say that it is actually more confusing for them to have things split up into different stylesheets. In my newer free template packages (responsive ones) where there are separate stylesheets that deal with the responsive stuff, I have combined as much of the other stylesheets into the main stylesheet, carefully commenting each code block so it is easier for the newbie to find. So far, this seems to be a practice that is being received well.

Thanks,

Anne

Thanks for that response. That is really good feedback.

Can you check and compare file sizes with some of your templates? Are they a lot larger than the default - it's only about 14 kb?

You're going to have to balance page load speed when trying this.
https://developers.google.com/speed/docs/best-practices/rtt#CombineExternalCSS