Правила для css-кода

Правила для оформления CSS-кода предельно просты и не отличаются особой изысканностью. Вот пример типичного фрагмента CSS:

Образец записи CSS

#navigation a:hover {

border-top: 1px solid #fff;

background: #f60 url(bg-arrow.gif);

}

Запись селектора следует начинать с новой строки, завершать ее открывающей фигурной скобкой. Каждое CSS свойство должно начинаться с новой строки с отступом и обязательно заканчиваться точкой с запятой, даже если это свойство последнее в блоке. В качестве отступа следует использовать символ табуляции. Блок обязательно завершается закрывающей фигурной скобкой с новой строки. Там где это необходимо, можно добавлять комментарии для выделения отдельных смысловых фрагментов CSS-кода. Блок комментариев в CSS начинается с символов «/*» и заканчивается «*/».

Комментарии в CSS

/* navigation styles */

#navigation a:hover {

border-top: 1px solid #fff; /* top border definition */

background: #f60 url(bg-arrow.gif); /* background styles */

}

Помимо этих простых правил существуют еще несколько рекомендаций относительно того, как следует называть классы, идентификаторы и файлы изображений. Согласно стандарту, имена классов и идентификаторов чувствительны к регистру, соответственно такие классы как MyClass и myclass являются двумя разными классами. Тем не менее, различные браузеры подобные различия могут понимать по-своему, поэтому, во избежание путаницы, имена классов и идентификаторов следует писать в нижнем регистре, а их составные части разделять знаком минус «-». Например:

Нерекомендуемая форма записи имени

#NavigationBar {…}

.NavigationList {…}

Рекомендуемая форма записи имени

#navigation-bar {…}

.navigation-list {…}

Что касается имен файлов для изображений, и любых других файлов, то их следует называть в нижнем регистре. Это связано с тем, что большинство хостинг провайдеров предоставляют серверы на основе Unix/Linux-системы, которые чувствительны к регистру имени файла. Если, например, вы назовете имя файла «MyPicture.jpg», а в CSS сошлетесь на него в нижнем регистре:

Имя файла изображения в CSS

#navigation a:hover {

background: #f60 url(mypicture.jpg);

}

На Windows-платформе вы не ощутите разницы, все будет прекрасно работать, картинка будет отображаться. Но когда вы поместите ваш код на сервер, то наиболее вероятно то, что система просто не найдет нужный файл, а именно «mypicture.jpg».

Все названия имен файлов, классов а также идентификаторов CSS должны быть смысловыми и тщательно подобраны таким образом, чтобы они отражали суть данного объекта. При работе с иностранными клиентами эти имена не должны содержать русскоязычные названия и аббревиатуры!

Основные правила для кода JavaScript

В данной главе мы не будем подробно рассматривать все правила форматирования для JavaScript, а ограничимся только лишь основными общими правилами, которые, впрочем, присущи любому языку программирования. Рассмотрим пример:

Пример кода JavaScript

function initPage()

{

var nav = document.getElementById("navigation");

if (nav)

{

var nodes = nav.getElementsByTagName("li");

for (var i = 0; i < nodes.length; i++)

{

nodes[i].onmouseover = function ()

{

this.className += " hover";

}

nodes[i].onmouseout = function ()

{

this.className = this.className.replace(" hover", "");

}

}

}

}

if (window.attachEvent && !window.opera)

window.attachEvent("onload", initPage);

Определение функции начинается с новой строки. В качестве отступов используются табуляции. Открывающая и закрывающая фигурные скобки расположены на одном уровне, чтобы четко видеть начало и конец блока. Параметры функции разделены запятой и символом пробела. Оператор присваивания «=» и операторы арифметических операций выделены пробелами. Все имена функций и переменных начинаются с маленькой буквы и имеют смысловые названия. Локальные переменные описаны с помощью оператора «var». Общий смысл форматирования JavaScript кода заключается в том, чтобы сделать этот код как можно более понятным и доступным для чтения редактирования.