Вже давненько я піднімав питання про стандарти кодування PHP, і от наважився описати правила хорошого тону для HTML, CSS і JavaScript’a.

Тут справи йдуть трохи складніше – бо адекватних стандартів я так і не виявив, отже ми підемо своїм шляхом. Для початку нам необхідно виділити кілька правил, щоб поліпшити читаність коду – одне з них – “розділяй і володарюй” – бо є що:

  • HTML – markup layer – верстка
  • CSS – presentation layer – подання
  • JavaScript – behavioural layer – поведінка

Але давайте по порядку…

Strict DOCTYPE

Не будемо вступати в дискусію, стандарт краще HTML 4.0 іль XHTML 1.0 – обидва вони гарні і цілком підходять в якості стандарту, але я дотримуюся XHTML’a ;). А от щодо DOCTYPE – то пора вже дорослішати і переходити на strict… якщо звичайно у Вас не таблична верстка, інакше прийдеться залишитися на transitional…

Посилання:

  • W3C: Recommended DTDs to use in your Web document
  • Чому так важливий DOCTYPE
  • XHTML Coding Rules від Віталія Харісова

Дана стаття написана в далекому 2008-му році, а зараз HTML5 там править бал, а все що вище – вже давно кануло в Лету

Кодування і спец-символи

Кодування UTF-8 і крапка. Не треба розводити холівар, приймаємо це як стандарт.

Далі нам треба б цю кодировочку прописати в нашому HTML’е – для цього необхідно помістити відповідний тег всередину тега , але є невеликий підводний камінь – є велика спокуса запхати до оголошення кодування – не ведіться – інакше браузер може зайнятися свавіллям і спробує самостійно визначити кодування тексту , і зазвичай не дуже вдало.

Anton Shevchuk’s Home

Щодо символів аля &, <, > – якщо ви хочете відповідати стандартам – то замінюємо це неподобство на відповідну послідовність &, <, >

Валідація

Зелений текст W3C validator’а – це наша мета, так що не забувайте закривати теги, так прописувати обов’язкові параметри…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc urna metus, ultricies eu, congue vel, laoreet id, justo.
Aliquam fermentum adipiscing pede. Suspendisse dapibus ornare
quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Посилання:

  • The W3C Markup Validation Service
  • XHTML-CSS-Validator

Форматування відступами

Відступи – невидимі в браузері, але такі незамінні для верстки (X)HTML’а вони в рази підвищують читабельність коду.
Та їх використання – просто пісня – починаєш новий вкладений тег – зроби відступ, закриваєш – прибери.
В якості відступу прийнято використовувати символ табуляції (tab) або кілька пробілів (зазвичай 4).

Порівняйте код:

  • Home
  • About Us
  • Contact Us

І код з відступами:

  • Home
  • About Us
  • Contact Us

Точно так само можете застосовувати відступи у вашому CSS файлі:

#header { .. }
#header h1 { .. }
#header h2 { .. }
#content { .. }
#content .title { .. }
#content .post { .. }

P. S. Коли займетеся блошиной оптимізацією вашого сайту, то вирішите, що 4 пробіл – це в 4-ри рази більше трафіку, ніж один символ табуляції 🙂

Теги люблять порядок

Дуже часто в шапці нашого сайту ми пишемо тег

з назвою нашого сайту, та ще й оформляємо його посиланням на головну сторінку сайту, і для цього обрамлялися наш тег

в . Більшість браузерів адекватно відобразить нам цей витвір, але з технічної точки зору це не вірно, оскільки тег відображається як inline, а

як block, а block елементи не повинні розташовуватися в inline елементах (це bad practices).

Погано:

Мій сайт

Добре:

Мій сайт

Посилання:

  • Властивості CSS – display

“Дивна” верстка

В англійській мові є термін “divits” – цим терміном нагороджують HTML розмітку з надмірним використанням div ів без потреби, я ж обзываю такі творіння “чудовими”. Зазвичай таким грішать новачки, які для застосування стилів CSS обертають елементи div и, що і призводить до їх розмноження без потреби.

  • Home
  • About Us
  • Contact Us

В даному прикладі, div (з класом “topNav”), обертає ul (з класом “bigBarNavigation”). Обидва, div і ul, є блочними елементами, так що нам немає необхідності завертати

    в
    ; все, що ми можемо зробити з
    ми можемо виконати і з

      .

      Вибираємо правильні імена

      Саме час обговорити правила іменування id, class ‘ ів. Візьмемо приклад з попереднього абзацу – у нас використовувався невпорядковані список з ідентифікатором “bigBarNavigation.” “Navigation” – ця частина імені несе смислове навантаження про вміст списку, але “big” і “Bar” відноситься лише до зовнішнього поданням, актуального на даний момент, але якщо ми змінимо дизайн сайту (і, скажімо, навігація у нас буде випадаючим меню), то даний ID буде неактуальним і лише додасть плутанини.

      Мій сайт про їжачках

      Наведу приклади “правильних” id, class ‘ ов: “mainNav”, “subNav”, “sidebar”, “footer”, “metaData”, а також “неправильні” імена (які описують дизайн): “bigBoldHeader”, “leftSidebar”, “roundedBox”.

      CSS’у CSS’ве

      Дуже часто, в меню сайтів, використовують написання тексту у верхньому регістрі. Звичайно це легко зробити використовуючи клавішу Shift на клавіатурі, але ми то не просто так CSS вивчали, так що цей функціонал варто перенести в CSS, для це цілі варто скористатися {text-transform: uppercase}. Тепер, якщо ви раптом передумаєте, Ви зможете з легкістю змінити вигляд вашого меню змінивши лише одну сходинку в CSS.

      HTML практично без змін:

      • Home

      І зовсім трохи змін в CSS:

      ul li a {text-transform: uppercase}

      Посилання:

      • Властивості CSS text-decoration
      • Властивості CSS text-transform

      Class/id для

      Навіщо? Поясню на прикладі уявіть, у Вас є сторінка сайту на якій розташування елементів інше ніж на всіх інших, щоб це створити Вам необхідно внести зміни в існуючий стиль для div a id=”mainContent”, для цього створюєте новий id=”mainContent-500″, створюєте та вносите зміни, і так для кожного елемента в нашому шаблоні, а якщо у нас таких сторінок кілька?, а потім це ще впроваджувати розробнику сайту…

      Якщо ж у body був клас, то ми б додали до нього ще один () і вже в CSS прописували зміни для всіх дочірніх елементів (не дарма ж це “‘каскадна”‘ таблиця стилів). Таким чином ми дуже сильно спрощуємо життя розробникам, які будуть впроваджувати наш дизайн.

      body.width-500 #mainContent {
      width:500px;
      }

      Логічний порядок

      Якщо це взагалі можливо, намагайтеся дотримуватися строго порядку при розташуванні елементів, наведу приклад:

      CSS у зовнішніх файлах

      Ви можете додати опис стилів CSS в самому тілі HTML, використовуючи відповідний тег …, але тільки за таку творчість хочеться дати по руках, адже такий стиль буде застосовуватися тільки для певної сторінки (хоча іноді в цьому є необхідність), набагато зручніше винести це у зовнішній файл CSS.

      Начебто виглядає непогано:

      body { background:pink }
      /* etc */

      Але таки так краще:

      Те ж саме стосується і JavaScript’a, але про нього трохи пізніше.

      Стандарти кодування CSS

      На жаль я не знайшов стандартів для написання файлів стилів, лише побажання:

      • Коментарі до елементів
      • Форматування або вставкам – від цього не всі в захваті
      • Правильні імена селекторів – вже обговорювалося вище

      Посилання:

      • CSS Techniques for Web Content Accessibility Guidelines 1.0
      • CSS Validation Service
      • Стандарти описані Віталієм Харисовым

      Відокремлюємо Javascript від HTML

      Нам слід відокремити всю функціональність JavaScript’а від HTML’а й запхати її в окремий файл. Для цієї мети краще всього нам підійде jQuery фреймверк, бо зручно, швидко і красиво (та й погляньте на графік)

      Ніколи не використовуйте атрибути on** для установки обробників подій, наведу приклади.

      Погано:

      Click!

      Добре:
      Всі обробники подій поміщаємо у зовнішній файл, який підключимо до початку сторінки використовуючи тег . Відповідно трохи переробимо попередній код:

      Click!

      В JavaScript файлі буде щось типу:


      $(‘a.doSomething’).click(function(){
      // Do something here!
      alert(‘You did something, woo hoo!’);
      });

      Семантична верстка

      Повертаючись до теми верстки варто згадати, – щоб писати гарний JavaScript код з використанням jQuery нам необхідна максимально прозора структура документа.

      Дуже Погано:

      First Option First option description
      Second Option Second option description

      Погано:
      Начебто трохи краще, але треба б позбутися обробників подій:

      First Option
      First option description
      Second Option
      Second option description

      Добре:
      Ми прибрали всі зайві, і додали id елемента dl – щоб JavaScript’е ми змогли додати обробники подій для елементів dt:

      First Option
      First option description
      Second Option
      Second option description

      Наприклад ось так буде виглядати обробник подій:

      $(‘#OptionList dt’).click(function(){
      /* do something */
      });

      Лікуємо JavaScript залежність

      При розробці web-додатків варто уникати JavaScript залежності, тобто наш сайт повинен працювати і при відключеному JavaScript’e, звичайно, якихось красивостей не буде, але сайт повинен працювати.

      Погано:

      Наведу простий приклад, в даному випадку, в залежності від часу у браузері з’явиться напис “Добрий ранок!” або “Добрий день!”, але варто нам відключити JavaScript, і користувач не побачить ні те, ні інше привітання.

      var now = new Date();
      if(now.getHours() < 12)
      document.write(‘Добрий ранок!’);
      else
      document.write(‘Добрий день!’);
      [/code]
      Добре:
      Привітання розміщується в тілі сторінки:

      Доброго ранку!

      І замінюється іншим привітанням в залежності від часу доби:

      var now = new Date();
      if(now.getHours() >= 12)
      {
      var goodDay = $(‘p[title=”Good Day Message”]’);
      goodDay.text(‘Добрий день!’);
      }

      Так при відключеному JavaScript’е користувачеві буде показано невірне привітання, але це все ж краще ніж нічого, та й цей приклад взятий зі стелі – але ж нам головне зрозуміти суть проблеми.

      Тепер наведу більш складний приклад, реалізація якого неможлива без змін серверної частини нашої програми. Давайте зробимо завантаження вмісту сторінки за допомогою AJAX’а, але при цьому залишимо підтримку браузерів з відключеним JavaScripti’om, візьмемо вже знайомий нам приклад з меню сайту:

      • Home
      • About Us
      • Contact Us

      Даний приклад працює у нас без JavaScript’a, всі сторінки в нашому меню використовують один і той самий шаблон для виведення інформації, і за фактом у нас змінюється лише вміст div a id=”MainContent”. Природно можна покращити даний функціонал використовуючи для завантаження контенту AJAX – для цього додамо наступний код:

      $(document).ready(function()
      {
      // вішаємо обробник на посилання в нашому меню Навігації
      $(“ul.Navigation a”).click(function(){
      var url = $(this).attr(“href”); // візьмемо посилання
      url =+ “?ajax=true”; // додамо до неї параметр ajax=true
      $(“#MainContent”).load(url); // завантажуємо оновлений вміст
      return false; // повертаємо false – щоб не спрацював перехід за посиланням
      });
      });

      У даному прикладі ми припускаємо, що сервер бачачи параметр ajax=true поверне нам не повністю всю сторінку, а лише оновлення div a id=”MainContent” (звісно сервер може бути розумнішими і не вимагати явної вказівки на використання AJAX’а, а цілком задовольнитися зловивши header X_REQUESTED_WITH зі значенням XMLHttpRequest)

      Подія onload

      Зазвичай всі Javascript події вішалися на “onload” тега – це дозволяло нам виконувати їх по завершенню завантаження сторінки. Забудьте це.
      jQuery надає нам спеціальний метод, званий “ready”, саме він, дозволить нам виконувати код після повного завантаження DOM. Саме завдяки йому, ми можемо впроваджувати ненав’язливі скрипти, при цьому повністю відокремивши Javascript від розмітки. Використовуючи $(document).ready(), ми можемо поставити в чергу цілий ряд подій і всі вони будуть виконані після завантаження сторінки.

      Слайди, слайди…

      Погано
      Наведу приклад коду для відображення alert-повідомлення з текстом “Hello World”, без використання jQuery і події onload:

      alert(‘Hello World’);

      Добре
      Old-school style – добре, коли у Вас немає необхідності в фреймверках:

      window.onload = (function(){
      alert(‘Hello World’);
      });

      А тепер з використанням jQuery напишемо наступний скрипт:

      $(document).ready(function()
      {
      alert(‘Hello World’);
      });

      Як бачите – дійсно просто.

      Стандарти кодування JavaScript

      Добре, що ми визначилися з тим, що JavaScript у нас лежить у нас в окремому файлі, але треба його привести в божеський вид, тобто нам потрібні стандарти кодування:

      • JavaScript style guide
      • Code Conventions for the JavaScript Programming Language

      Написання коментарів, так само є хорошим тоном, але якщо вони ще й будуть допомагати в генерації документації – буде краще:

      • ScriptDoc comprehensive tag reference
      • JSDoc – JavaScript Documentation Tool

      Так само правилом хорошого тону є стиснення вихідних кодів JavaScript’а для зменшення часу завантаження (для live-сервера):

      • Порівняння засобів компресія для javascript’ов

      P. S.

      Якщо з jQuery у Вас виникли труднощі, то раджу почитати наступні статті:

      • jQuery для початківців
      • jQuery для початківців. Частина 2. JavaScript Меню
      • jQuery для початківців. Частина 3. AJAX

      А ще краще – скачайте і вивчите підручник jQuery для початківців

      Дана стаття підготовлена за матеріалами:

      • jQuery, JavaScript and Coding: Examples and Best Practices
      • 12 Principles For Keeping Your Code Clean