HTML, CSS, JavaScript, Smarty¶

HTML¶

Все теги, названия атрибутов пишутся только в нижнем регистре!
Все значения атрибутов обязательно заключаются в двойные кавычки!

Структурирование 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>

Теги Smarty структурируются аналогично (отступы в 4 пробела).
Все шаблоны должны быть проверены на 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 не должно быть знаков &. Должны быть везде &.
Теги должны закрываться непосредственно после содержимого тега, то есть не должно быть переноса строки перед закрывающим тегом.

Исключение: теги <table><tr><td>. В этом случае перенос строки допускается для улучшения читабельности, но нужно обязательно проверять, чтобы не было символа пробела между содержимым тега <td> и закрывающим тегом </td>.
Для комментариев используется конструкция {* *}.
Чекбоксы в общем случае должны передавать значение Y (заглавный). Есть способ передать Y при наличии галочки и N при ее отсутствии. Можно использовать эту форму в общих случаях, чтобы лишних проверок не делать в скриптах:
```
<input type="hidden"   name="product_data[is_selected]" value="N" />
<input type="checkbox" name="product_data[is_selected]" value="Y" />
```
ID элемента должен содержать только цифры, буквы и знак подчеркивания и начинаться обязательно с буквы.
- Правильно: <div id="box_params_1234"></div>
- Неправильно: <div id="1212asd[sdsd]"></div>
Не использовать параметр style у элемента. Все стили должны быть объединены в классы находиться во внешнем файле.
В автоматизированных тестах иногда нужно привязаться к определенному элементу. Для таких случаев нужно использовать аттрибут data-ct-xxxxxx (ct = cscart test), где xxxxxx — более-менее осмысленное имя элемента. Использовать для привязки классы и ID нельзя.

JavaScript¶

Всегда экранируйте содержимое 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¶

Правила для формирования названий стилей аналогичны переменным в PHP, за исключением разделителя. В качестве разделителя исполюзуется символ дефис (-). Для структурирования используется отступ в 4 пробела:
```
.dialog-box {
    font-size: 12px;
    font-weight: 10px;
}
```
Все размеры указываются в абсолютных величинах — px. Хотя иногда бывают моменты, когда нужно указать относительные величины.

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

/* General styles */
/* /General styles */

/* Header styles */
/* /Header styles */

/* Side boxes styles */
/* /Side boxes styles */

/* Main boxes styles */
/* /Main boxes styles */

Smarty¶

Параметры типа “флаг”, передаваемые в шаблоны, должны иметь значения true/false, а не Y/N или что-либо другое.
- Правильно:
```
{include file="common/price.tpl" value=$price hide_sign=true}
```
- Неправильно:
```
{include file="common/price.tpl" value=$price hide_sign="Y"}
```
Не используйте функцию str_replace в шаблонах. Для этого есть модификатор replace.
В шаблонах используйте только двойные кавычки . Исключение: JavaScript.
Для вывода фигурных скобок НЕ нужно использовать $ldelim или ldelim, если только открывающая и закрывающая скобки находятся не на одной строке:
```
{$smarty_var}
<script>
if (some_cond) { // тут смарти сам сообразит, что это не его теги
    ...
}

var a = {ldelim}{rdelim}; // выведет var a = {};
</script>
```
Используйте короткую запись присваивания переменных.
- Правильно:
```
{$test = 123}
```
- Неправильно:
```
{assign var="test" value=123}
```