March 22, 2009

Семантическая верстка: имена, комментарии и оформление

Твой код слабее моего
Unreal Tournament 3

Эта статья – продолжение моих предыдущих рассуждений на тему семантической (или все-таки семантичной? :) ) верстки. За запоздалое ее появление прошу прощения: давно лежала в черновиках и я буквально недавно про нее вспомнил. Итак…

“Кривые” и абсолютно не запоминающиеся имена переменных / классов / функций / файлов (нужное подчеркнуть) – ошибка любого начинающего компьютерного специалиста. Спустя пару-тройку лет этот специалист, конечно, перейдет на правильное именование, а еще через столько же времени его код станет действительно хорошим.

Я не претендую на звание идеального верстальщика, однако я попробую рассказать вам про то, как давать правильные имена и писать правильные комментарии в верстке.

Имена

Имя объекта (будь то имя класса или идентификатор) должно отражать его назначение, на худой конец данные, которые в нем хранятся, но никак не его внешний вид. Так, например, формулировка class=”whiteBG” не допустима. Вместо нее лучше использовать что-то вроде class=”сomment”, потому как это будет отражать смысл содержимого (конечно, с тем условием, что в этом блоке будут находиться комментарии).

Следует различать классы и идентификаторы в CSS. Класс описывает совокупность элементов с определенными характеристиками, а идентификатор отвечает за вид отдельного уникального элемента. Идентификатор не может повторяться на странице (в противном случае HTML код станет невалидным). Получается, идентификаторы лучше давать редким и важным объектам. Например, элементам лейаута всего сайта. Я сформулировал короткий список идентификаторов и их значений:

header – шапка сайта
logo – логотип сайта
menu – меню сайта
aside – сторона, колонка слева или справа
lside/rside – левая и правая колонка (конкретизируем, если их две)
content – cам контент
footer – подвал сайта

Вот так это будет выглядеть на практике:

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

Этот список я выработал за время верстки сайтов. Остальные я обычно добавляю по ходу работы. Например, для формы поиска, вполне сгодится searchForm, а для списка новых предложений – newProducts.

Используя вложенные классы можно легко избежать повторения кода. Так, например, можно ввести классы title, info, list, image для блоков с заголовком, информацией, списком и иллюстрацией в каком-то блоке

Такой подход сможет выработать у программиста такой же рефлекс, что и у собаки Павлова: если программист увидит div class=”list”, то он будет точно уверен, что внутри находится какой-то список.

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

Комментарии и правильное форматирование – все равно что хорошие манеры за столом. Человек хорошо и правильно прожевывает пищу, но не умеет держать вилку и нож в нужной руке, постоянно роняет куски и перепачкал уже всю скатерть. Примерно так выглядит и верстальщик, который пишет страшный код. Стоит помнить, что в верстке, как и в программировании есть своя культура.

О культуре поведения за столом программирования написано немало, а потому я не буду рассуждать на ту тему дальше (думаю, и так порядком утомил :) ).

Примеры

Дак как же должен выглядеть хороший код? Я попробую привести такой пример и буду рад выслушать любые комментарии на его счет.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Правильная верстка :)</title>
</head>
<body>
    <div id="header">
        <!-- Здесь будет шапка-->
    </div>
    <ul id="menu">
        <!-- Меню-список -->
    </ul>
    <div id="main">
        <ul id="newsBar">
            <!-- Список новостей -->
        </ul>
        <div id="content">
            <!-- Контент -->
        </div>
    </div>
    <div id="footer">
        <!-- Футер -->
    </div>
</body>
</html>

Этот же пример с наполнением можно посмотреть вот тут. Там и применение разных сложных тегов, и неплохое форматирование. А вот так, с красивыми отступами и комментариями, на мой взгляд, должен выглядеть CSS:

/* + Layout */

div#header {
    border-left: 1px solid #ffff00;
    border-right: 1px solid #ffff00;
    height: 60px;
    padding: 10px;
}

a#logo {
    color: #ff9900;
    float: right;
    font-size: 3em;
    margin: 10px;
    text-decoration: none;
}
    a#logo b {
        color: #ffdd55;
    }

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

Все…

Ну вот, кажется все. Про теги рассказал, про имена тоже. Комментарии и форматирование упомянул. Программа минимум выполнена. Программу максимум будете выполнять вам :). Пишите хороший, семантичный и валидный код и, конечно же не забывайте читать этот сайт ;)

Комментарии (3)

08.01.2010

grinka

Надпись
Этот же пример с наполнением можно посмотреть вот тут.
видеть можем, а вот ссылочки на это “тут” нетути.
11.08.2010

Иван

А что делать если это большой проект. Если у нас несколько шапок на странице, не сколько контентных областей?
12.08.2010

admin

Хороший вопрос, Иван. Собственно, вариантов тут несколько: если шапки похожи друг на друга, делаем что-то вроде div class=”header header-index”, где в div.header – все, что относится к шапке вообще, а к div.header-index – то, что имеет отношение к главной странице. Таким образом, мы даем вполне понятное семантичное имя, используем наследуемые классы и избавляемся от потенциальных div=”header1″ и div=”header2″