Почему встроенный код CSS и JavaScript такой плохой

Единственный приемлемые зависимости через idи classатрибуты CSS и JavaScript крючки-ин.

Взяв приведенный выше пример плохого кода, давайте перепишем его правильно:

<link rel="stylesheet" href="CSS/base.css" type="text/css" media="screen">
<script type="text/javascript" src="js/base.js"></script>

<div id="container">
    <div id="navigation">
        <a id="get-news" href="news-proper-URL">News</a>
    </div>
</div>

/*
    CSS code, in separate file (base.css)
*/
#container {
    width: 800px;
    margin: 1em auto:
    font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif;
}

#navigation {
    float: left;
    width: 400px;
    padding: 1em 2em;
    font-size: 0.9em;
}

/*
    JavaScript code, in separate file (base.js)
*/
window.onload = function () {
    document.getElementById("get-news").onclick = function () {
        // Get news through AJAX
    };
}

Немного лучше, не правда ли?

Когда использовать idи когда использоватьclass

По сути, это очень просто. An idявляется уникальным для веб-страницы, то есть он должен появляться только один раз. classАтрибут, с другой стороны, может быть в документе , как столько раз , сколько необходимо. Мое эмпирическое правило заключается в том, что обычно я использую idатрибут для больших блоков на веб-странице, таких как контейнер сайта, навигация, основное содержимое и т. Д. В противном случае я всегда использую classатрибут.

Когда дело доходит до кода CSS , связать что-либо с чем-либо с этим классом в коде HTML очень просто. Однако, что касается доступа к JavaScript и DOM , встроенная поддержка этого не существует во всех веб-браузерах, поэтому я рекомендую функцию getElementsByClassName , которая также поддерживает некоторые другие полезные функции, недоступные ни в одной собственной реализации веб-браузера.

Обработка событий в JavaScript

Код в примере — это старый способ DOM уровня 1 для применения событий к элементу. Он отлично работает для одного события на элемент, но не в том случае, если у вас есть несколько событий, которые вы хотите применить, или риск того, что чужой код перезапишет ваше событие (или наоборот).

Чтобы не беспокоиться об особенностях обработки событий между реализациями веб-браузера (и поверьте мне, они есть ), я рекомендую вместо этого использовать библиотеку JavaScript, такую ​​как DOMAssistant или jQuery .

Но как насчет крупных игроков, таких как Google?

Итак, к настоящему моменту вы, надеюсь, согласились со всеми моими аргументами и готовы окунуться в смелый новый развивающийся мир интерфейса. Но просто из любопытства вы взгляните на самый популярный в мире веб-сайт Google и подумаете:

Подожди минутку сейчас! Роберт поддерживает меня.

Стартовая страница, и особенно страница результатов поиска, заполнена встроенными стилями и событиями JavaScript. Если они делают это так, это должно быть лучшим способом, верно? Ну нет. У Google есть несколько безумно талантливых JavaScript-кодеров, а также гениев в других областях, но когда дело доходит до HTML и CSS , они на самом деле несколько печально известны среди талантливых разработчиков интерфейсов.

В августе пару лет назад мой друг Роджер переписал код Google с реальным правильным кодом , и он более подробно объясняет, что он сделал в своем посте.

В конце, тем не менее, мы должны учитывать невероятно большое количество посетителей, которые Google получает каждый день, и для них это все о производительности, производительности, производительности (для тех, кто заинтересован в углублении в это, пожалуйста, прочитайте Улучшение производительности вашего веб-сайта — советы и хитрости, чтобы получить хороший рейтинг YSlow ). Для них решающее значение имеет сокращение любого HTTP- запроса, хотя это не оправдывает отсутствие правильного кода.

Наиболее разумным вариантом для Google было бы иметь один styleблок, расположенный вверху их HTML- кода, и один JavaScriptблок, расположенный внизу их HTML- кода (подробнее о том, почему в разделе Где включить файлы JavaScript в документ ), и просто иметь idи classатрибуты для подключения этого кода.

В конце концов, я действительно думаю, что польза от наличия кода в любом месте HTML- кода незначительна, и, кроме того, как только мы говорим о возвращении посетителей (например, я посещаю Google каждый день) наличие внешних включений было бы более выгодно и значительно лучше как для производительности, так и для использования полосы пропускания. Кроме того, для сравнения, страница Google для мобильных устройств находится в гораздо лучшем состоянии, поэтому наличие обычной настолько бедной страницы действительно имеет какую-либо действительную мотивацию — я думаю, что это скорее отсталая, которую еще не видели должным образом (они Вы, вероятно, в ужасе от его изменения).

Вывод

Поэтому, как указано выше, обязательно включите весь свой
код CSS и JavaScript из внешних файлов. Начните сегодня! Удалите весь встроенный код от
HTML- кода, и вы, а также ваша команда и посетители веб-сайта сразу почувствуете себя лучше.