5 простых рекомендаций начинающему верстальщику
Если вы любите верстать или только учитесь с помощью тэга <div>, скорее всего эта статья будет полезной для вас. Статья посвящена описанию написания чистого html кода с использованием тега <div>, но в то же время сводя к минимуму его использование. Наверно каждый, кто когда-нибудь пытался подправить или уникализировать чужой шаблон WordPress сталкивался с плохо читаемым, грязным кодом, так? Думаю даже сам автор этого шаблона позже потратит огромное количество времени чтобы вспомнить то что он наворотил там. Предлагаю вашему вниманию несколько правил написания html кода, которые обязательно сохранят ваше время в бедующем при отладки или редактировании , особенно крупных проектов.
1. Удалите ненужные <div> тэги
Часто лишний тэг <div> используется при работе с тэгами <form> или <ul>. Зачем нагромождать если можно достичь того же результата путем применения css?
Пример 1:
В приведенном ниже примере показано, как можно отказаться от <div> тега и объявить стиль для тега <form>.
Пример 2:
Иногда мы оборачиваем контент в дополнительные <div> тэги исключительно ради расстояния. Например в левой части изображения используется <div> чтобы создать расстояние между контейнерами. Но если каждый контейнер имеет заголовок (т.е. <h4>), можно отказаться от использования <div> .
2. Замените лишний <div> тэг
Нужно всегда использовать html тэги по назначению (то есть <h1> для заголовков, <p> для параграфа текста, и <ul> для элементов списка).
Пример:
3. Свести к минимуму использование тегов <div>
Вы видели грязно сверстанный шаблон, где <div> тэги повсюду? Они свели вас с ума? Пропуск тэга </div> или открытие нового тэга <div> портит весь верстаемый шаблон? Я уверен что большинство это испытывало на себе. Таким образом, вы всегда должны свести к минимуму использование <div> тега, если это возможно. Это сделает отладку и редактирование проще.
Пример 1:
Вместо использования <div> тега для управления переходами, имеет смысл использовать <p> тег.
Пример 2:
В следующем примере показано, как я могу использовать CSS, чтобы сократить два <div> тега заменой одного <span> тега. Они оба производят один и тот же эффект.
4. Форматируйте ваш код ( ставьте отступы)
Используйте разные уровни вложенности в вашем исходном коде. Так ваш код будет легче читаем и в нем будет проще ориентироваться.
Пример:
5. Комментируйте закрытие </div> тэга
При верстке например WordPress шаблона , который разделен на несколько файлов: index.php, header.php, sidebar.php и footer.php. Таким образом, вы всегда должны сделать комментарий для закрытия </div> тэга, чтобы не заблудиться.
Пример:
Я обычно вставляю комментарий тега HTML сразу после закрытия </div> тега. Я использую косую черту, чтобы указать что это закрывающейся тег.
Просуммируем?
1) Удалите ненужные <div> тэги
2) Замените лишний <div> тэг.
3) Свести к минимуму использование тегов <div>
4) Форматируйте ваш код ( ставьте отступы)
5) Комментируйте закрытие </div> тэга
Соблюдайте эти простых 5 правил, не усложняйте себе и окружающим вас жизнь!
- Твитнуть
-
- Февраль 26, 2011 г.