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.
-
These days, most people use Content Management Systems (CMS) which allow far more than just headers and footers. There is a lot of open source CMS software, such as Wordpress.– paj28Jan 10, 2015 at 21:24
-
1It is a very small website, using a CMS seems like a bit of overkill for something with 4-5 pages total.– TravisJan 10, 2015 at 22:16
-
It's probably easier to install a CMS rather than figure out server-side includes– paj28Jan 11, 2015 at 11:43
-
I've already figured out how to include what I required, that was simple and easy enough. I am concerned about whether including scripts and links to stylesheets in the header can cause a problem, and what the proper approach would be.– TravisJan 12, 2015 at 2:10
-
Including scripts and stylesheets in the header is no problem. My comments were regarding the "best practices" part of your question.– paj28Jan 12, 2015 at 9:45
3 Answers
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
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.
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.
-
1Frames have several problems, one of them is that a page is hard to bookmark or otherwise link to, because it will link to a frame and not the frameset. I suggest frames be left in 1990s, along with
<marquee>
and<blink>
.– 9000Jan 7, 2016 at 17:44