то ждем ваше обращение в нашей службе тех поддержки.
Правила оформления кода (Coding Standards (X)HTML, CSS). Использование JavaScript при верстке/интеграции дизайн-макетов.
1. В теле html-документа DOCTYPE обязателен.
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
2. В качестве кодировки страниц необходимо использовать UTF-8.
Пример:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Индексная страница портала</title>
</head>
3. Форматирование отступов табуляцией обязательно. При форматировании необходимо придерживаться следующих правил:
· Все блоки должны выделяться отступами одинаковой величины, 4-х символьными.
· При форматировании HTML открывая вложенный тег необходимо сделать отступ от базового на один символ табуляции.
· При форматировании HTML закрывающий тег должен иметь одинаковый отступ с открывающим.
Пример:
не правильно писать так
<ul class="bigBarNavigation"><li>
<a href="/">Главная</a></li><li>
<a href="/about.html">О проекте</a></li><li>
<a href="/contact.html">Контакты</a><div class="subMenu">
<!-- Пример --></div></li></ul>
правильно писать так
<ul class="bigBarNavigation">
<li>
<a href="/">Главная</a>
</li>
<li>
<a href="/about.html">О проекте</a>
</li>
<li>
<a href="/contact.html">Контакты</a>
<div class="subMenu"><!-- Пример --></div>
</li>
</ul>
· При форматировании CSS-файлов стиль описывающий вложенный элемент/коллекцию элементов должен сдвигаться относительно базового на один символ табуляции.
Пример:
#header{
/*набор интрукций*/
}
#header h1{
/*набор интрукций*/
}
#header h2{
/*набор интрукций*/
}
#content{
/*набор интрукций*/
}
#content .title{
/*набор интрукций*/
}
#content .post{
/*набор интрукций*/
}
· При форматировании CSS-файлов недопустимо перечисление стилей через запятую. Необходимо действовать по правилу: один дескриптор - один стиль.
Пример:
не правильно писать так
#header, #footer{
/*набор интрукций*/
}
правильно писать так
#header{
/*набор интрукций*/
}
#footer{
/*набор интрукций*/
}
4. Комментарии к HTML и JavaScript формате, размещенный непосредственно в html-документе должны носить исключительно временный характер (на период верстки документа). При внедрении верстки интеграторы должны использовать PHP комментарии.
5. Комментарии к CSS-стилям используются двух типов:
· непосредственно над конкретным стилем, заключаются в следующие последовательности символов: /*, */.
Пример:
/*обеспечивает преобразование текста заданного элемента к верхнему регистру символов*/
ul li a{
text-transform: uppercase
}
· вокруг логически сгруппированного набора стилей
Пример:
/*СТИЛИ ССЫЛОК НА ПОРТАЛЕ*/
a{
/*Набор инструкций*/
}
a:hover{
/*Набор инструкций*/
}
a:active{
/*Набор инструкций*/
}
a:link{
/*Набор инструкций*/
}
a:visited{
/*Набор инструкций*/
}
/*КОНЕЦ БЛОКА: СТИЛИ ССЫЛОК НА ПОРТАЛЕ*/
6. Html-разметка, CSS и JS должны быть валидны (согласно стандартам W3C).
· Символы &, <, > заменяем на соответствующую мнемонику &, <, >
· В обязательном порядке закрывать теги и прописывать обязательные параметры
7. При создании html-страницы необходимо учитывать, что блочные элементы не должны быть вложены в строчные.
Пример:
не правильно писать так
<a href="/index.html"><h1>Главная страница портала</h1></a>
правильно писать так
<h1><a href="/index.html"> Главная страница портала </a></h1>
8. Нельзя оборачивать блочный элемент html-разметки в div, также являющий блочным элементом разметки, только для того, чтобы выполнить какие-то действия с исходным блочным элементом. Чрезмерное использование div'ов - плохая практика (divits).
Пример:
<div class="topNav">
<ul class="bigBarNavigation">
<li>
<a href="/">Главная</a>
</li>
<li>
<a href="/about.html">О проекте</a>
</li>
<li>
<a href="/contact.html">Контакты</a>
<div class="subMenu"><!-- Пример --></div>
</li>
</ul>
</div>
В данном примере, div (с классом “topNav”), оборачивает ul (с классом “bigBarNavigation”). И div и ul, являются блочными элементами, так что нет необходимости оборачивать <ul> в <div>. Все, что мы можно сделать с <div>, можно сделать и с <ul>.
9. Наименование параметров id и class html-элементов должны описывать роль данных элементов в разметке, а не внешнее представление (дизайн).
Пример:
не правильно писать так
"bigBoldHeader", "leftSidebar", "roundedBox"
правильно писать так
"mainNav", "subNav", "sidebar", "footer", "metaData"
10. Преобразования внешнего вида элементов разметки должны делаться средствами CSS.
Пример:
не правильно писать так
<ul>
<li><a href="/index.html">ТЕКСТ НАБИТЫЙ В ВЕРХНЕМ РЕГИСТРЕ</a></li>
<!-- ... -->
</ul>
правильно писать так
<ul>
<li><a href="/index.html">Текст набитый в нужном виде</a></li>
<!-- ... -->
</ul>
в CSS файле
/*обеспечивает преобразование текста заданного элемента к верхнему регистру символов*/
ul li a{
text-transform: uppercase
}
11. Необходимо задавать class/id для тега <body>.
12. При построении html-разметки придерживаться логического порядка расположения элементов.
Пример:
<body class="body">
<div id="header"></div>
<div id="wrapper">
<div id="content"></div>
</div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
13. Хранить описание стилей CSS и JS-сценариев во внешних файлах, если иное не обуславливается необходимостью.
14. В качестве JS-фреймворка используется JQuery 1.7.
15. Никогда не использовать атрибуты on** для установки обработчиков событий.
Пример:
не правильно писать так
<a onclick="doSomething()" href="#">Click!</a>
правильно писать так
Все обработчики событий помещаем во внешний файл, который подключается в заголовке страницы используя тег <script>.
<a href="backuplink.html" class="doSomething">Click!</a>
в JavaScript файле
$( 'a.doSomething' ).click( function(){
// Набор инструкций
alert( 'Набор инструкций выполнен!' );
} );
16. Использовать $(document).ready() вместо события onload, что позволяет полностью отделить JavaScript от разметки.
Пример:
не правильно писать так
BX.ajax.onload_617153 = ( function(){
alert( 'Hello World' );
} );
правильно писать так
$( window ).ready( function(){
alert('Hello World');
} );
17. Создавать максимально прозрачную структуру документа. Необходим для грамотного применения JQuery.
Пример:
не правильно писать так:
<table>
<tr>
<td onclick="doSomething();">Первый пункт</td>
<td>Описание для первого пункта</td>
</tr>
<tr>
<td onclick="doSomething();">Второй пункт</td>
<td>Описание для второго пункта</td>
</tr>
</table>
не правильно писать так (необходимо избавиться от обработчиков событий):
<dl>
<dt onclick="doSomething();">Первый пункт</dt>
<dd>Описание для первого пункта</dd>
<dt onclick="doSomething();">Второй пункт</dt>
<dd>Описание для второго пункта</dd>
</dl>
правильно писать так:
<dl id="OptionList">
<dt>Первый пункт</dt>
<dd>Описание для первого пункта</dd>
<dt>Второй пункт</dt>
<dd>Описание для второго пункта</dd>
</dl>
в JavaScript файле
$( '#OptionList dt' ).click( function(){
/* Набор инструкций */
} );
18. Необходимо избегать JavaScript зависимости, т.е. портал должен работать и при отключенном JavaScript’e. При этом ряд функциональных особенностей будет отсутствовать, но портал будет работать.
Пример:
не правильно писать так:
var now = new Date();
if( now.getHours() < 12 )
document.write('Доброе утро!');
else
document.write( 'Добрый день!' );
правильно писать так:
<p title="Good Day Message">Доброе утро!</p>
в JavaScript файле
var now = new Date();
if( now.getHours() >= 12 ){
var goodDay = $( 'p[title = "Good Day Message"]' );
goodDay.text( 'Добрый день!' );
}
Назад в раздел
Наверх