HTML, CSS, JavaScript, Smarty

HTML

  1. Все теги, названия атрибутов пишутся только в нижнем регистре!

  2. Все значения атрибутов обязательно заключаются в двойные кавычки!

  3. Структурирование HTML-кода осуществляется отступами в 4 пробела. Тег <tr> от тега <table> отступами не отделяется. Структурирование производится только внутри секций body и head.

    <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. Теги Smarty структурируются аналогично (отступы в 4 пробела).

  5. Все шаблоны должны быть проверены на HTML-валидность. В данный момент валидность должна соответствовать стандарту HTML5 (<!DOCTYPE html>)

    • Нужно обязательно закрывать ВСЕ теги — читаемость кода с закрытыми тегами намного выше. Если тег не имеет закрывающей пары (<hr>, <br>, <img>, <meta>, <input>), то нужно использовать форму <tag_name /> (т.е. перед закрывающей скобкой ставится прямой слэш, а перед слэшем — пробел).
      • Правильно: <div><p>some text<hr width="100%" /></p></div>
      • Неправильно: <div><p>some text<br></div>
    • Нужно ОБЯЗАТЕЛЬНО соблюдать вложенность тегов:
      • Правильно: <b><i>test</i></b>
      • Неправильно: <b><i>text</b></i>
    • При верстке нужно учитывать семантику вложенных тегов.
    • В теле HTML не должно быть знаков &. Должны быть везде &amp;.
  6. Теги должны закрываться непосредственно после содержимого тега, то есть не должно быть переноса строки перед закрывающим тегом.

    Исключение: теги <table><tr><td>. В этом случае перенос строки допускается для улучшения читабельности, но нужно обязательно проверять, чтобы не было символа пробела между содержимым тега <td> и закрывающим тегом </td>.

  7. Для комментариев используется кострукция {* *}.

  8. Чекбоксы в общем случае должны передавать значение Y (заглавный). Есть способ передать Y при наличии галочки и N при ее отсутствии. Можно использовать эту форму в общих случаях, чтобы лишних проверок не делать в скриптах:

    <input type="hidden"   name="product_data[is_selected]" value="N" />
    <input type="checkbox" name="product_data[is_selected]" value="Y" />
    
  9. ID элемента должен содержать только цифры, буквы и знак подчеркивания и начинаться обязательно с буквы.

    • Правильно: <div id="box_params_1234"></div>
    • Неправильно: <div id="1212asd[sdsd]"></div>
  10. Не использовать параметр style у элемента. Все стили должны быть объединены в классы находиться во внешнем файле.

  11. В автоматизированных тестах иногда нужно привязаться к определенному элементу. Для таких случаев нужно использовать аттрибут data-ct-xxxxxx (ct = cscart test), где xxxxxx — более-менее осмысленное имя элемента. Использовать для привязки классы и ID нельзя.

JavaScript

  1. Всегда экранируйте содержимое smarty-переменной при выводе ее внутри параметра HTML-тега или JavaScript-кода. Иначе если в переменной содержится одиночная или двойная кавычка, ошибка обеспечена.

    • Правильно:

      <script language="javascript">
      var param = '{$smarty.get.param|escape:javascript}';
      </script>
      ...
      <input type="text" name="aa" value="{$param|escape:html}">
      
    • Неправильно:

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

​2. Не используйте префикс javascript:. Ссылка на то и ссылка, чтобы куда-то вести. JavaScript-код должен быть написан в обработчике события, например, через микроформат:

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

​3. Все определения функций должны быть завершены точкой с запятой:

// пример корректного кода
var input, output;

// точка с запятой в конце определения функции:
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 = '';
  // в конструкции IF в конце точку с запятой использовать НЕ надо.
  if (focus) {
    input.focus();
  }
};

CSS

  1. Правила для формирования названий стилей аналогичны переменным в PHP, за исключением разделителя. В качестве разделителя исполюзуется символ дефис (-). Для структурирования используется отступ в 4 пробела:

    .dialog-box {
        font-size: 12px;
        font-weight: 10px;
    }
    
  2. Все размеры указываются в абсолютных величинах — px. Хотя иногда бывают моменты, когда нужно указать относительные величины.

  3. Логические участки таблицы стилей разделяются комментариями:

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

Smarty

  1. Параметры типа “флаг”, передаваемые в шаблоны, должны иметь значения true/false, а не Y/N или что-либо другое.

    • Правильно:

      {include file="common/price.tpl" value=$price hide_sign=true}
      
    • Неправильно:

      {include file="common/price.tpl" value=$price hide_sign="Y"}
      
  2. Не используйте функцию str_replace в шаблонах. Для этого есть модификатор replace.

  3. В шаблонах используйте только двойные кавычки . Исключение: JavaScript.

  4. Для вывода фигурных скобок НЕ нужно использовать $ldelim или ldelim, если только открывающая и закрывающая скобки находятся не на одной строке:

    {$smarty_var}
    <script>
    if (some_cond) { // тут смарти сам сообразит, что это не его теги
        ...
    }
    
    var a = {ldelim}{rdelim}; // выведет var a = {};
    </script>
    
  5. Используйте короткую запись присваивания переменных.

    • Правильно:

      {$test = 123}
      
    • Неправильно:

      {assign var="test" value=123}