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.
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.
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.
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
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.