Объясните, какой div вы закрываете
Большую часть времени, когда я просматриваю источник веб-сайта, я вижу, в самом низу страницы, почти бесконечный список заключительных тегов. В самом деле, многие новички думают, что они просто должны использовать divs вместо таблиц для получения качественного кода. Divs являются очистителями, чем таблицы, но без надлежащей организации кода, это может быть как (или даже иногда больше) грязный, как код на основе таблицы.
Использование отступов является хорошим началом. Но совет, который, безусловно, может сделать вас сэкономить много времени, чтобы прокомментировать каждый div теги вы закрываете, как показано в примере ниже:
<div id="header"> <div id="sub">... </div><!-- #sub.first.left --> </div><!-- #header -->
Использование сброса CSS
Если вы новичок или если вы были в отпуске на необитаемом острове в течение последних 6 лет, вы, возможно, уже знаете, насколько полезно CSS сбросить его. Поскольку по умолчанию браузеры не применяют один и тот же стиль по умолчанию к элементам HTML, сброс CSS гарантирует, что все элементы не имеют определенного стиля, так что вы можете определить свой собственный без риска многих проблем с визуализацией кросс-браузера.
HTML, тело, div, пролет, яблоко, объект, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, аббревиатура, адрес, большой, цитирую, код, дель, dfn, EM, шрифт, img, ins, kbd, q, s, samp, маленький, забастовка, сильный, к югу, sup, TT, Var, б, у, я, в центре, дл, dt, dd, ПР, уль, ли, поле, форма, этикетка, легенда, таблица, подпись, tbody, tfoot, thead, tr, th, td маржа: 0; обивка: 0; граница: 0; контур: 0; размер шрифта: 100%; вертикальное выравнивание: базовый уровень; фон: прозрачный; } тело высота линии: 1; } ol, ul стиль списка: нет; } блок-квота, q котировки: нет; } блок-квота:до, блок-квота:после, q:до, q:после содержание: ''; содержание: нет; } /' не забудьте определить стили фокусировки! */ :фокусировка контур: 0; } / Не забудьте выделить вставки как-то! */ ins текст-украшение: нет; } дель-йо текст-украшение: сквозной; } Таблицы по-прежнему нуждаются в 'cellspacing'"0" в разметке таблица пограничный коллапс: коллапс; расстояние между границами: 0; }
Источник:http://meyerweb.com/eric/tools/css/reset/index.html
Не используйте @import
Файлы CSS могут быть включены с помощью @import безопасности. Это может быть полезно, когда, например, вы хотите включить таблицу стилей в другую. Другой распространенной практикой является включение файла CSS в HTML-документы, используя следующее:
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>
В то время как это @import, директива гораздо медленнее, чем другой способ включить таблицы стилей в HTML-документ:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
Это не будет иметь значения на веб-сайтах с низким трафиком, но если у вас есть шанс владеть популярным веб-сайтом, не тратьте время вашего посетителя, используя @import.
Источник:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
"Smush" ваши изображения
Будучи разработчиком, я всегда считал, что оптимизация моих изображений для Интернета не было легко. Я попытался старый добрый "Сохранить для веб" Photoshop команды, но большую часть времени, я в конечном итоге с изображениями, которые были либо слишком большой или без достаточного качества.
В результате, у меня была плохая привычка использовать неоптимизированные изображения на моих сайтах. Это не проблема, когда вам не придется заботиться о пропускной способности вашего сайта, но после моего недавнего переключения на моем vps.net виртуальный частный сервер, я должен был быть осторожным с размерами изображения.
В это время, я нашел очень крутой инструмент под названием Smush It: Вы вводите свой неоптимизированный URL-адрес изображения, и Smush Это создаст совершенно оптимизированное изображение для вас. Вы можете сэкономить до 70% от размера файла, сохраняя при этом исходное качество. В качестве примера, все изображения из моего списка редакторов онлайн-кода были "smushed".
Не смешивайте CSS с HTML
В качестве языка разметки правильное использование HTML заключается в организации документов путем определения заголовка, лакея, списков, блок-котировок и т.д. Некоторое время назад веб-разработчики спереди часто использовали теперь увеньшеемые HTML-атрибуты для стиля конкретного элемента.
В настоящее время атрибут стиля позволяет разработчикам вставлять CSS непосредственно в HTML-документ. Это очень полезно для тестирования или когда вы спешите. Но атрибут стиля — плохая практика, которая полностью идет вразрез с философией CSS.
Следующий пример иллюстрирует, насколько грязным и трудно читать простую строку кода может стать, с атрибутом стиля:
<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Кошки, которые код</a>
Не смешивайте Javascript с HTML
Точно так же, как смешивание HTML-кода с CSS является плохой практикой, вы не должны использовать Javascript в html-документах. Следующая плохая практика иллюстрирует событие onclick:
<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Кошки, которые код</a>
Такой же результат может быть достигнут с помощью беспрепятственного Javascript. В этом примере я использую популярную основу j'query:
$(документ).готов (функция()
$('#cwc').нажмите кнопку (функция()
оповещения ('Я люблю этот сайт');
});
});
Это может показаться немного сложнее на первый, особенно для начинающих; но это, безусловно, нет, и он будет держать ваш HTML документ чистым.
Использование условных комментариев
Вы знаете это, IE сосет, и некоторые клиенты сосать еще больше, требуя от вас создать веб-страницы, которые совместимы с этим устаревшим браузером. Для таргетинга на конкретные версии IE, вы можете использовать хорошо известные IE хаки, как показано ниже:
высота: 200px; /- нормальные браузеры / _height: 300px; /- IE6 / .высота: 250px; /- IE7 / Высота: 350px; /- Все IEs /
Эти хаки чрезвычайно полезны иногда, но они не лучший способ целевой конкретной версии IE, и это приведет к вашей проверки CSS на провал.
Вместо этого следует использовать условный комментарий, показанный ниже, для таргетинга на IE6.
<link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Поместите файл Javascript внизу
Популярной практикой конца 90-х/начала 2000-х годов было место Javascript файлов в<head>И</head>Теги. Проблема в том, что ваши файлы JavaScript будут загружены первыми, и, следовательно, ваш контент будет загружен после.
Размещая файлы Javascript в нижней части документов, вы гарантируете, что файлы JS будут загружены только тогда, когда содержимое было должным образом отображено.
... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
Использование HTML семантически
HTML не является языком программирования. Это язык разметки, используемый для создания структурированных документов, обозначая структурную семантику текста, такую как заголовки, абзацы, списки и многое другое.
Если вы начали создавать веб-сайты в старые добрые 90-х или в начале века, вы знаете, как грязный разметки было в то время. Но к счастью, она эволюционировала.
Среди прочего, важно использовать HTML элемент семантически. Например, меню навигации всегда должно быть неупорядоченные:
<ul> <li><a href="#">Дома</a></li> <li><a href="#">О</a></li> <li><a href="#">Контакт</a></li> <li><a href="#">Блог</a></li> </ul>
Тест WHILE вы строите, чтобы избежать проблем с кросс-браузером
Одна из самых больших ошибок, которые я когда-либо делал при разработке HTML, CSS и javascript, не было проверить мои страницы на нескольких браузерах, пока я писал их. Вместо этого, я использовал, чтобы написать весь мой код и просто просмотреть в Firefox, чтобы увидеть, как она была оказана.