CrankBerry Blog Title

(1) Comment

Structuring websites in terms of folders, codes and naming conventions

When you begin to build bigger sites composed of 50 or more files you start to get messy and unorganized – it's time to structure. The key to organizing a website is folders, code structure and naming conventions. Master these skills, be consistent, and you'll be more organize and prepared for the future.

The future means resume working on a site after a long break. Often, when you're working on a site you'll know where every single line of code is. It's just like when you leave your keys or wallet somewhere, chances are you'll remember where it's located, but leave it there for a year and try to find it – unless it's in hindsight you'll forget where you've put them. Train yourself to be organized and let it be a habit. Coming back to a site that you have left for months or years will natural as your organization skills haven't changed.


The first and simplest thing you can use is folders. Everybody knows how to create them and place files inside. Use them to group files together. One thing most developer will do is place all images in a folder, so that is a good start. Do this for everything. You can group css, images, functions, javascripts, and templates in their own folders. The first two maybe obvious and probably done by most developers already. As for functions, these can be scripts that are mainly classes and specific funtions. Javascripts can be all javascripts or specific ones like JQuery related codes. The last group, templates, can hold files that affects the aesthetics of the site (non-css files).

You can also use subfolders if you have a lot of files within each folder. If your site is composed of thousands of images, group them based on their location or their function of the site. Location based could be broken down as header, footer, landing page, content page and etc. Function based grouping can be something like user profiles, navigation, products and etc. I'd like to keep it to the rule of third which is no further than three levels deep as then it starts to get messy again, but this really depends on your site. If your site is composed of thousands or files, then be my guest.

Code Structure

The structure of your code within each file is more of an art than science. Do what you need to do but ensure you're organized. Use comments as much as possible and don't be afraid to be descriptive. You can be creating with your comments as to highlight sections and create titles for individual sections. On certain files such as CSS you can code a based on hierarchy of your site, which means the top of your file defines the HTML then the BODY all the way to the FOOTER which is at the bottom. This type of structure can only work on certain files. Try and see what works best.

Naming Conventions

Organizing your files based on name is a really good skill too. If multiple files work together in a certain way you can name them to group them together without necessarly creating a folder for them. Say three files work together to make up the product update module you can have them named prod_update_delete.php, prod_update_edit and prod_update_info.php. That way when you need to edit the product update module you can quickly find the three files and know where to go. If the module has its own folder you can still combine the two for a quicker find, such as:

  • [FOLDER] administrator
    • [FOLDER] products
    • [FILE] _class_prod.php
    • [FILE] _class_search.php
    • [FILE] _class_template.php
    • [FILE] images.php
    • [FILE] prod_update_delete.php
    • [FILE] prod_update_edit.php
    • [FILE] prod_update_info.php
    • [FILE] search.php
    • [FOLDER] shopping_cart
  • [FOLDER] css
  • [FOLDER] images
  • [FOLDER] javascript

Underscores can be used to bring files to the top of the list. You can use this for important or commonly shared files within the module such as classes and functions.

Structure and organization is good skills and habits to have especially if you work with multiple sites at a time or you often leave and come back to sites. Like everything else you do, you'll need practice to get better. Chances are you won't be comfortable with the way you did things on your first try, keep changing and perfecting it until you're where you prefer. As you deviate and evolve try to be consistent, it'll keep your style flowing. Good luck.

This entry was posted on Thursday, March 3rd, 2011 at 11:25 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Structuring websites in terms of folders, codes and naming conventions”

  1. JACK JACK says:

    GENERIC PHARMACY : -==== Respiratory Cure ====-

    Order Good Generic Drugs Today!…

Leave a Reply

Spam protection by WP Captcha-Free