Linking stylesheets and scripts when using server side includes

Question

I am working on a site where I want to have a header and footer on each page, so I thought about using server side includes for this. I have not used them before so I am a little bit unsure about best practices when it comes to styling my site. I am currently including the styles and scripts in the file for the header, and when it is included the rest of the site is styled, and it seems to be working, but I was wondering if there are best practices I should be aware of when it comes to this.

Answer 1

If the webiste is small as you clained in the comments just create stylesheet with all general styles and use some more specific styles to override the defaults when necessary.

Something like:

file1

<section class="home">
<h1>Home</h1>
</section>

file2

<section class="breakingNews">
<h1>Very important title</h1>
</section>

styles

h1 {
    font-weight: bold;
}

.breakingNews h1 {
    color: red;
}

I did find the trello css guide quite useful but maybe it's a bit of an overkill if the project is so small. Worthy read anyway: https://gist.github.com/bobbygrace/9e961e8982f42eb91b80

As for js files I'll still keep to one file and detecting content, again, if you are building something very simple.

Something like:

//code you'll want to run always
$(function(){
    alert("welcome to my awesome site");
});

//code only if some elements are present on the site
$(function(){
    if($('.breakingNews').size()){
        alert("OMG those news are so breaking");
    }
});

This advice may not be a good idea on big websites

Answer 2

Well the most usual way to do that is to declare each stylesheet and js to its own file and make them abstract to use.

But if you declare all styles and js of your website in single files and include them, they can conflict with each other or with code you write later on and destroy the layout.

Answer 3

Probably its good to use frames in html.While creating your html page.what should be done is just split the page into 3 frames.one frame for header and the last one for your footer.It is possible to split according to your choice i.e,you can specify the split percentage.