One css file for whole site with Grid...
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.
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.
I'm guilty of that, I forget it over and over again But still my main.css doesn't grow very much.
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.
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!
"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.