HTML, CSS, JavaScript, Smarty

HTML

  1. Write all tags and attribute names only in lowercase.

  2. Put all attribute values in double quotes.

  3. Use 4-space indentation to structure HTML code. Structure the code only in the head and body sections. Don’t separate <tr> from <table> with indentation.

    <html>
        <head>
        </head>
        <body>
            <div id="header">Header</div>
                <div id="contents">
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
    
                <h7>Some table data</h7>
    
                <div id="table_data">
                    <table cellpadding="0" border="0">
                    <tr>
                        <td>
                            ....
                        </td>
                    </tr>
                    </table>
                </div>
            </div>
        </body>
    </html>
    
  4. Use 4-space indentation to structure Smarty tags.

  5. Check all templates for HTML validity. Templates must be HTML5-compliant (<!DOCTYPE html>).

    • Make sure to close ALL tags. HTML5 doesn’t require it, however, closed tags improve code readability.

      If an element doesn’t have a closing tag (for example, <hr>, <br>, <img>, <meta>, <input>), write the tag like this: <tag_name />—use a slash before the end quote, and a space before the slash.

      • Right:

        <div><p>some text<hr width="100%" /></p></div>
        
      • Wrong:

        <div><p>some text<br></div>
        
    • Make sure to close the nested tags in the right order:

      • Right:

        <b><i>test</i></b>
        
      • Wrong:

        <b><i>text</b></i>
        
    • Keep in mind the semantics of the nested tags.

    • Don’t use “&” in HTML body; use &amp; only.

  6. Close the tags right after the content of the tag—don’t move the closing tag to the next line. The only exception are the <table><tr><td> tags: in this case you can move the closing tag to the next line to improve readability. Make sure there is no space between the closing </td> tag and the content of <td>.

  7. Use {* *} for commentaries.

  8. A checkbox should generally send the “Y” (capitalized) value. Here’s the way to send “Y” for ticked checkboxes and “N” for the unticked checkboxes:

<input type="hidden"   name="product_data[is_selected]" value="N" />
<input type="checkbox" name="product_data[is_selected]" value="Y" />
  1. An element ID must begin with a letter and may only include digits, letters and the underscore symbol.

    • Right:

      <div id="box_params_1234"></div>
      
    • Wrong:

      <div id="1212asd[sdsd]"></div>
      
  2. Don’t use the style parameter for elements. All styles must stay in an external file, united in classes.

  3. In automated tests you may need to refer to a certain element. In this case use the data-ct-xxxxxx attribute. CT stands for cscart test, and xxxxxx is a meaningful name of the element.

Important

Don’t use classes and IDs to refer to elements.

JavaScript

  1. Always escape the content of a Smarty variable when the variable is a part of HTML parameter or JavaScript code: otherwise a single or double quote in the variable will result in an error.

    • Right:

      <script language="javascript">
      var param = '{$smarty.get.param|escape:javascript}';
      </script>
      ...
      <input type="text" name="aa" value="{$param|escape:html}">
      
    • Wrong:

      <script language="javascript">
      var param = '{$smarty.get.param}';
      </script>
      ...
      <input type="text" name="aa" value="{$param}">
      

​2. Never use the javascript: prefix—a link is meant to lead somewhere. JavaScript code must be written in the event handler, for example, via microformat:

<a href="index.php" class="cm-submit-form">

​3. All function definitions must end with ; (semicolons):

// a sample of the correct code
var input, output;

// a semicolon at the end of function definition:
onload = function() {
    input = document.getElementById("input");
    output = document.getElementById("output");
    clearAll(true);
};

function packScript() {
    output.value = pack(input.value);
};

function clearAll(focus) {
    output.value = input.value = '';
    // don’t use semicolon at the end of an IF construction
    if (focus) {
        input.focus();
    }
};

CSS

  1. The names of the styles must be meaningful. Write the names of styles in lowercase and use dashes (-) to separate words from each other. Use 4-space indentation to structure the code.

    .dialog-box {
        font-size: 12px;
        font-weight: 10px;
    }
    
  2. Use absolute values (px) to specify all sizes. However, relative values are justified in some cases.

  3. Divide the CSS file into logical parts with commentaries:

    /* General styles */
    /* /General styles */
    
    /* Header styles */
    /* /Header styles */
    
    /* Side boxes styles */
    /* /Side boxes styles */
    
    /* Main boxes styles */
    /* /Main boxes styles */
    

Smarty

  1. All flag parameters passed to the templates must have the true/false values, not Y/N or anything else.

    • Right:

      {include file="common/price.tpl" value=$price hide_sign=true}
      
    • Wrong:

      {include file="common/price.tpl" value=$price hide_sign="Y"}
      
  2. Don’t use the str_replace function in templates. Use the replace modifier instead.

  3. Use only double quotes in templates. The only exception is JavaScript.

  4. Don’t use $ldelim or ldelim to display curly brackets, unless the opening and the closing bracket are on the same line:

    {$smarty_var}
    <script>
    if (some_cond) { // in these case Smarty can figure out that these aren’t Smarty tags
        ...
    }
    
    var a = {ldelim}{rdelim}; // the output is var a = {};
    </script>
    
  5. Use short notation to assign values to variables.

    • Right:

      {$test = 123}
      
    • Wrong:

      {assign var="test" value=123}