Как писать эффективный XHTML/CSS код

Если мы с вами хоть немного чем-то похожи и работаете вы много (working like crazy мне выражение нравится) или же ваше хобби отнимает все больше и больше времени, — рано или поздно вы столкнетесь с ситуацией, которая фигурально описывается отличной “женской” поговоркой, — “Носить нечего, вешать некуда”. XHTML занимает уже 5 “экранов”, CSS таблица стилей “весит” килобайт 20, а результат на экране монитора вам просто не нравится. Но спешу вас обрадовать. Такую проблему достаточно просто “разрулить”, если выработать в себе привычку писать эффективный код.

Тщательно все спланировать

Независимо от того, работаете ли вы полностью самостоятельно (что, безусловно, сложнее организационно, но легче технически) или работаете в команде, — самым лучшим средством планирования, лично для меня, является лист формата А4 и карандаш. Нарисовал страничку — поделил на предполагаемые основные зоны (div’ы), а их, в свою очередь, если нужно поделил на подзоны, визуально выделил каждую и пронумеровал. Кто учился в институте — знает как делать эскизы, главное, это чтобы вам было понятно (я исхожу из того, что эти эскизы нужны только для вас, и не есть частью документации по текущему проекту).

Отложите этот лист недалеко. Возьмите другой для вторичной страницы. Повторите процедуру, но уже учитывая пронумерованные блоки на главной странице. Очевидно, что на первой и второй странице будут блоки, которые совпадают, поэтому у них должен быть совпадающий номер. Я очень надеюсь, что суть вам понятна — нужно найти и обозначить одни и теже функциональные блоки в будущем XHTML коде веб-страниц сайта. Если есть страницы более глубокие — повторяйте эту процедуру до тех пор, пока не закончите.

Результатом должно стать определенное количество функциональных блоков. На данном этапе не имеет значения, существуют эти блоки отдельно или находятся один в другом. Сейчас можно переходить к следующему этапу.

Грамотно присвоить имена элементам XHTML структуры

Фокус в том, чтобы правильно “обозвать” пронумерованные вами ранее функциональные блоки. Сразу скажу, — пренебрегать этим просто глупо. Функциональным элементам структуры нужно присваивать функциональные имена. Это значит, что имена нужно присваивать основываясь на том, что данный элемент структуры делает, а не на том, как он сейчас выглядит. И тогда, даже через год, вы сможете быстро сообразить, что это за элемент и зачем он нужен на странице.

Простой пример. Можно назвать боковую панель redsidebar, а можно и outsidelinkblock. Как называть блоки — дело ваше, главное, чтобы это было вам понятно и носило функциональную окраску. Тогда ваша структура реально не зависит от презентации — дизайна и может иметь таких дизайнов сколько угодно. К тому же, пару раз воспользовавшись этой методикой вы, скорее всего, станете присваивать одинаковые имена одинаковым функциональным блокам на разных сайтах. Если это произошло — ваша эффективность как кодера возросла. Вот парочка интересных ссылок о том, как люди называют свои блоки в HTML структуре:

What’s in a name
What’s in a name (pt2)

А так же:

Use class with semantics in mind
Structural Naming

Компетентно использовать id и class’ы

Атрибут id или уникальный идентификатор, в отличие от атрибута class, может быть включен в код конкретной валидной страницы только один раз, для этого (идентификации элемента) и предназначен. Любая веб-страница имеет свой набор уникальных (единственных для каждой страницы) элементов, например #global-navigation, #search и так далее. Также, надо помнить, что у конкретного HTML элемента может быть только один id. А вот классов может быть несколько (сколько угодно), поэтому их можно “сцеплять”, как, например, в следующем коде:
<ul id="lookalsolinks" class="intext bullets outside"></ul>

Здесь я (зачем-то, для примера) захотел добавить буллеты (.bullets) к списку ссылок в тексте (.intext) и указать визуально признак того, что это внешниие ссылки, например прописав картинку в классе outside. Конечно, все это можно сделать и в одном классе, но тогда у меня не будет возможности манипулировать этими параметрами. Обращаю ваше внимание на то, что я не призываю плодить ненужные классы, наоборот, я предлагаю использовать возможности CSS эффективно и “гибко”.

Использовать CSS манипуляции с XHTML элементом body

Присваивая конкретный класс элементу body на конкретной странице вы обретаете возможность кардинально сменить CSS параметры как всей страницы в целом, так и отдельного элемента на такой странице. Этот класс работает как переключатель. Освоив эту технику вы сможете менять дизайн каждой отдельной страницы и “подсвечивать” навигацию, например текущее расположение пользователя на сайте. Все просто как 2x2:
body {background:#fff;}
body.about {background:#fff url(aboutus.jpg) top right no-repeat;}

И продолжая эту тему, подсвечиваем (изменяем стиль по умолчанию на другой) в меню ссылку “О Нас” на странице “О нас”, указывая тем самым “местоположение” пользователю на сайте:
body.about ul#navigation a#aboutuslink {color:#f50;}

Естественно, вы можете писать какой-угодно стиль, изменяя все, что угодно, а не только цвет. Три строчки кода — и 2 решенные серьезные задачи :) — альтернативный дизайн страницы “О нас” и улучшение usability сайта. Ну а что вы хотите? Современный CSS дизайн.

Использовать CSS каскад

Вот как использую его я. В коде страницы я прикрепляю css файл для отображения на экране компьютера (media screen). Этот файл называю почти всегда screen.css В этом файле содержится следующий код:
@import url(layout.css);
@import url(typo.css);
@import url(visuals.css);

Такая организация позволяет, во-первых, быстро ориентироваться в CSS коде, а во-вторых, полностью контролировать указанные в названиях импортируемых файлов параметры, не затрагивая остальные (и при случае сразу сменить например всю типографику или все визуальные элементы дизайна, даже не вспоминая о других значениях тех или иных элементов).

Использовать стандартные возможности CSS по полной программе

Никита Вакорин, from Umade.ru замечательно на мой взгляд перевел статьи Роджера Йохансена (Roger Johansson) CSS tips and tricks, для начинающего CSS дизайнера — “источник мудрости и вдохновения”, переводы прочесть просто необходимо, вот они:

CSS: советы и приёмы, часть 1
CSS советы и приёмы, часть 2

Подводя итог, в очередной раз хочу напомнить, что CSS это не “rocket science” и все зависит от практики и желания. Чем быстрее человек освоит CSS, тем быстрее его работа станет похожа на творчество, а не на тупое переписывание табличных тегов.

This entry was posted on Saturday, November 11th, 2006 at 2:53 am and is filed under Веб-дизайн, Практика. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.