Can my JS files be combined? CSS files too?

My JS and CSS files are like this:
bss-css js files

Is it okay to combine the JS files into one file, and the same with the CSS - having all the CSS in one file?

In the case of the JS it would be an easy copy and paste but with the CSS, would it require doing the “…” | Move To for each CSS block, like this below?
move-to

Cheers.

To answer your question, yes, you can combine the files, but that may not necessarily be the best course of action. If you combine them, then every page will load all the CSS rules and JavaScripts by default, regardless of whether they’re needed or not. If your entire site needs all your CSS and JS, then by all means combine them. But if you only need certain chunks of CSS or certain scripts on certain pages, you may as well take advantage of Bootstrap Studio’s ability to selectively include CSS and JS on a per page basis. Not loading assets that aren’t needed will make your pages load faster.

Regarding moving CSS rules, you don’t have to move the rules individually. Just highlight all the rules you want to copy with the mouse (or hit ctrl-a to highlight the entire stylesheet) and then use the keyboard shortcut ctrl-c to copy, then go to your destination stylesheet and hit ctrl-v to paste. This will even copy the media queries.

(PS - if you do copy all your CSS rules into one stylesheet, it’s a good habit to use the comment feature to label chunks of CSS in your stylesheet so you can easily find rules for different things at a glance… for example, /* button-styles-start */ /* button-styles-end */ or /* nav styles */ etc… The format is up to you. This also comes in handy when you go to update a site you built a year ago, and you’ve forgotten how you styled a particular part, or what you called the classes, etc… It also may help some other poor soul who may have to edit your website in the future if you are no longer doing it.)

1 Like

Very useful information, thank you!

You can switch on Minify JavaScript and CSS in the export settings, then you will only have one css file and one javascript file when you export you design

1 Like