+7 495 008 8452
  • Загрузка
Выберите ваш цвет
Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.

Правила оформления кода (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&quot;&gt;

       <html xmlns="http://www.w3.org/1999/xhtml&quot;&gt;

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).

·        Символы &, <, > заменяем на соответствующую мнемонику &amp;, &lt;, &gt;

·        В обязательном порядке закрывать теги и прописывать обязательные параметры

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( 'Добрый день!' );

              }



Назад в раздел

Подписаться на новые материалы раздела:
Загрузка...