12 November

Front-end Code Standards & Best Practices in our themes

: 0 Comments
best practice for highest performance

Welcome to another post! This week we want to tell you how we work in the front-end side.

So here are the best practices and code standards that we are using for developing our themes for Magento platform in the front-end side.

Regarding Magento frontend structure and his strict conventions, the things that are useful to understand how Magento is comprised in modules are:

  • knowing how layout XML creates page

  • Knowing how html blocks get loaded as defined by the page layouts

(It is good to learn Magento structure first and then start learning how the .phtml files work.)

Front-end can get relatively CSS & Javascript-heavy, we use a debugging tool like Firebug or the Chrome-DevTools and the following good practices and code standards for do the best ecommerce pages.

CSS

Cascading Style Sheet (CSS) describes all presentation aspects of the page via a description of its visual properties. CSS is powerful in that these properties are mixed and matched via identifiers to control the page’s layout and visual characteristics through the layering of style rules (the “cascade”).

Those are some of good practice that we use:

  • Using External CSS files.

  • Minimizing the # of files.

  • Including css files in the HEAD of the document, because it is the first things that load

  • Having a LINK tag to include a stylesheet (for example)

<link rel=”stylesheet” type=”text/css” href=”myStylesheet.css” />

  • Not using inline styling

<p style=”font-size: 12px; color: #FFFFFF”>This is poor form, I say</p>

  • Not including styles inline in the document, either in a style tag or on the elements.

  • Using Responsive.css to make rendering more consistent across browsers.

  • Using IDs for elements that occur only once inside a document ,otherwise, we use classes.

  • Understanding cascading and selector specificity make us write very terse and effective code.

  • Writing selectors that are optimized for speed. Where possible, we  avoid expensive CSS selectors. For example, we avoid the * wildcard selector and don’t qualify ID selectors (e.g. div#myid) or class selectors (e.g. table.results.) This is especially important with web applications where speed is paramount and there can be thousands or even tens of thousands of DOM elements.

  • Using the px unit of measurement to define font size, because it offers absolute control over text.

Internet Explorer Bugs

Inevitably, when all other browsers appear to be working correctly, any and all versions of Internet Explorer will introduce a few nonsensical bugs, delaying time to deployment. While we encourage troubleshooting and building code that will work in all browsers without special modifications, sometimes it is necessary to use conditional if IE comments for CSS hooks we can use in our stylesheets.

Fixing IE

<!–[if lt IE 7 ]> <body> <![endif]–>

<!–[if IE 7 ]> <body> <![endif]–>

<!–[if IE 8 ]> <body> <![endif]–>

<!–[if IE 9 ]> <body> <![endif]–>

<!–[if !IE]><!–> <body> <!–<![endif]–>

.box { float: left; margin-left: 20px; }

.ie6 .box { margin-left: 10px; }

JavaScript

JavaScript is another major component of a web page. JavaScript code, when properly applied to a web page, enhances the overall user and browser-based experience through attaching to events and controlling the overall behavior layer.

Those are some of good practice that we use for JavaScript:

  • Housing the 99% of code in external javascript files and including at the END of the BODY tag for maximum page performance.

  • Using libraries such as  jQuery, that it is one of the best javascript libraries what provides us write less and better code.

  • Not relying on the user-agent string. Do proper feature detection.

  • Not using document.write().

  • Calling the variables and functions with a  logically name:  For example: popUpWindowForAd rather than myWindow.

  • Using constants or configuration variables (like animation durations, etc.) are at the top of the file.

  • Striving to create functions which can be generalized, take parameters, and return values. (This allows for substantial code reuse and, when combined with includes or external scripts, can reduce the overhead when scripts need to change. For example, instead of hardcoding a pop-window with window size, options, and url, consider creating a function which takes size, url, and options as variables.)

  • Commenting our code! That helps us to reduce time spent troubleshooting JavaScript functions.

Those are the best practices and code standards that our team use as well as  implement when we are developing in Magento’s platform.

I hope you have enjoyed this article so as to learn more about our development team!

Those are the best practices and code standards that our team use as well as  implement when we are developing in Magento’s platform.

I hope you have enjoyed this article so as to learn more about our development team!

Don’t miss up the next news about Magento!!

Back to Top