Unfortunately this freedom can create situations which are not only difficult to manage in the mid and long terms but also they may work worst than better organized equivalents.
There are few rules which we can follow to improve the quality and, at the same time, the performances of our projects.
The first simple rule is the following:
- Keep Html in .htm / .html files
- Keep CSS rules in .css files
This strategy creates files with clear meaning and contents.
There are several advantages:
- Development is easier thanks to the support of HTML editor and IDE like, for example, recent Netbeans 7.3.
- Pages are easier to update, even by other programmer, because of clearer structure.
The internal structure of a HTML page could be like the following
<!DOCTYPE html> <html> <head> .... <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> .... contents.... <script src="/js/script.js"></script> </body> </html>
In the code above, the CSS rules have been placed in the style.css which is in the css dir. The css dir will contain all our CSS files.
The CSS files should be included with a link tag inside the head tag. Note: the head tag usually contains other information not included in this fragment.
The target is to keep our project structure clean and clear; the /ext contains everything which has not been created by us.
A final but very important remark: the script tag(s) in a page should be placed at the very end of the body tag. Not at body tag begin, nor inside head tag.