1. Normally you have all Javascript bundled and minified from layout. To initialize a Javascript component only on a single page type you can then add a script tag in your view that triggers your perfect function on document ready or similar. This I would say is the most used approach since the global Javascript file can easily be cached and bundled which normally leads to good performance.
2. In some cases it makes sense to have a separate package of Javascript files that are not normally loaded. For instance, you might have a logged in section where you use a SPA application which uses a heavy framework like angularjs or similar. In that case I would use two separate layout files (cshtml) where one contains the scripts needed for the public part of the website and another contains the scripts needed for the logged in part. Other than that I would use the same approach as 1 and have a single script tag to wire things up in the view for the page template.
3. If you are building addons or similar, Episerver do have a system for managing and injecting scripts that is documented here. That is usually overkill to use for a normal page type though.

Thank you very much for your help. I think you are correct with how to address the JS portion.

The issue is now we want to style a page, or have the lower end user be abel to style the page. In our organization we have several levels of user, we want some to have very little access and others to be abel to do some styling and then full blown administrators can do whatever. There has to be a way to add some additional styling features in the backend so the lower-credentialed logged in user can add some styles themselves? So lets say we are just doing a simple card layout for three topics we want to really stand out. It only lives on one page. The card wont show right if the user cant add some CSS. It only needs loaded for that page so we can add the call to just one section of pages I assume. Like lets say about the company which has 3 pages in it. We can only make a call for the CSS for that section. Hell I'd settle for the internal css <syle></style> type if we could get it to work, Tiny MCE keeps trying to block the code and theres no other reasonable place to add it.

Am I missing something? Is this option available somowhere Im not looking here or what?

thank you kindly for any help

Hi,

What about if you add a string property to your page type(s), let's call it CustomPageCss. This is where these advanced editors can enter the page specific CSS and then your solution renders that string property to your page head when defined. Tadaa, custom CSS per page when needed.

(so really depending on your solution, but if you have an Alloy like pageviewmodel, then you would add that CSS string to that and render it from there)

If you want custom styles on a page, the best option is normally to make a custom drop down where the editor can select “red, green, blue” or similar and then in the backend/view this value will be used to set a css class on your card. 

Another option is of course to make a separate string property to let the editor create his own style tags. Then you can show it on page by using Html.Raw in the view. Normally I avoid this since it invites the editor to destroy “my” site :)

@Daniel, I understod from the original description that he actually needs in some cases to actually be able to inject custom css and js to the page.

I agree 100% with you that normally you would have properties for some known customization/variation in the styles so that editors can't brake the site :D