Here are 10 best practices for front-end development (in Magento):
- Understand Magento’s front-end structure and follow conventions. Know how Magento is comprised of modules, know how layout XML creates page layouts and know how html blocks get loaded as defined by the page layouts. It is good to learn Magento’s structure first and then start learning how the .phtml files work. Diving into the html/php code immediately is possible but harder and more prone to errors. Magento is a well-architected program, following the conventions used by the ecommerce framework is necessary for the best-maintainable deployment.
- Do not try to customize everything from the get go. You will probably be under a limitation of either time or budget and should focus on the big picture. Magento is a highly flexible piece of software which has the inherent danger for the enthusiastic engineer to start tinkering with everything. Of course, given the time & budget, and if necessary a solid implementation partner, anything is possible.
- Use the template path hints and block names from the Magento configuration section (developer tab). This makes it possible to find relevant .phtml blcoks much more quickly. Note that you should select a website or store view to be able to turn on template path hints.
- Use the Magento forums / wiki, approach colleagues or others with the needed knowledge, if you are stuck.
- When basing a design on the basic layout that is default in Magento (1,2 or 3 columns, header, footer, several blocks in columns) it is wise to use the “blank” template to base your own template own instead of Magento’s “default/default” template. The “blank” template contains less CSS styling and more sparse HTML code (just the necessary hooks).
- When building a custom template or adjusting an existing one, work top-down. First think about and lay out the structure, then refine the contents.
- Test early and often, also in multiple browsers. While this may be self-evident, the large array of options present in the ecommerce framework of Magento make this point extra important. If you are working on the display of prices for instance, you should check what it looks like with special prices, price ranges, “as low as” prices, tier prices, if the price gets adjusted properly when dropdown options with extra pricing are chosen, etc.
- If you are part of a team, be very clear about who edits what, and use versioning tools like Subversion.
Of course, this list is not exhaustive, and feedback would be appreciated.