One css file for whole site with Grid...

User 2220522 Photo


Registered User
49 posts

Another question from a newbie:

It looks like all the pages on my site built with CGB will be looking at the same css file (main.css). Should I worry that this will make the pages load slowly? My site will have about 60 pages and the file is 8kb with 2 pages completed.

This brings up another question, what is the page limit for CGB? Is it about the same as SD (60-75)?

The previous web authoring tool I used had individual css files for each page. I could follow the code for each page, but for a whole web site? I worry about bloat that may occur due to editing (snippets of css left behind when things are deleted). It will be near impossible to check the css code.

Are my worries unfounded? I'm new to coffeecup and have been burned in the past with inefficient authoring tools.

Thanks in advance for any help.
Marty
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

8KB is as good as nothing. If you give each element on each page different class names, of course it will add to the main.css, but the idea is to reuse the class names for similar elements. I don't know of any site builder that uses a separate css file for each page. That would also defeat the purpose of having a style sheet for easy styling, in one place, the elements that you have on every page. The norm is having the grid system css files (1 - 2 of them) plus a custom stylesheet for the rules you add yourself.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,533 posts

The maximum page limit for SD is currently 125 (see here). CGB currently allows a maximum of 10 pages.

Frank
User 379556 Photo


Registered User
1,533 posts

Marty wrote:
I worry about bloat that may occur due to editing (snippets of css left behind when things are deleted).

In my experience, SD, CGB etc. automatically remove any unused style settings.

I have found that the following can create unnecessary settings in the main.css file -
(a) manually entering a setting that is the same a the default setting for a style;
(b) entering a setting that is already effective for that breakpoint by carry over from the setting at another breakpoint.
Such unnecessary settings can easily be identified for an element by examining the 'Your CSS (Read Only)' pane in the Element panel, and can easily be removed via the Reset button at the foot of 'Apply Styles' in the Styles panel.

As mentioned by Inger, such matters are unlikely to have a significant effect in page loading, but removing unnecessary items from the main.css file makes it easier to read.

Frank
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Frank, that number (b) above, do you mean such things as entering some style at a wider breakpoint and then afterwards discovering that you actually forgot to move the slider down to the smallest breakpoint first?
I'm guilty of that, I forget it over and over again :| But still my main.css doesn't grow very much.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,533 posts

Hi Inger.

Yes - I've found I did it quite a lot in my website. Sometimes it was, as you say, while trying to get used to the switch from desktop-down with coffeegrinder to mobile-first with Foundation. On other occasions it was from changing something at a breakpoint and then deciding against that change - changing it back again, instead of using Reset regarding the style.

The above has come to light as I am converting RSD 2.5 project files to SD V3, which has led to my spending some time examinining (for Fallback purposes) the 'Your CSS (Read Only)' panel regarding the RSD 2.5 container elements. Duplicated or otherwise unnecessary flexbox settings wasted quite a lot of CSS lines, making less easy a quick comprehension of the settings made at various breakpoints regarding an element. As you say, it isn't significant in terms of CSS file size or load time.

As viewports are shown in rems in the 'Your CSS (Read Only)' panel, in doing the above I have wished that the Toggle Breakpoints list showed the rem equivalent for each px figure. Perhaps others can mentally multiply by 16 quicker than me.

Frank
User 2220522 Photo


Registered User
49 posts

Frank, great advice on the reset button. I was noticing the extra code when accidentally styling at a wider break point. I didn't know how to correct this issue short of deleting the object and starting over.

I was using SiteSpinner Pro which created separate css files for each page. I much prefer CGB interface and the whole CSS Grid concept. This program rocks and the user community too!

Martin
User 2903050 Photo


Registered User
260 posts

I too was also worried about lots of unnecessary code in the CSS file when trying out new ideas. I emailed CoffeeCup and got this response from Bob.

"Deleted selectors (and selectors without styles) should not be in the exported code. To keep the code as clean as possible write the styles to the Type selector 1st."

Hope that helps. Regards

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.