Разделяй и властвуй

Тут стоит запомнить несколько простых правил:

—выносим JavaScript во внешние файлы

—никогда не пишем inline обработчиков событий (onclick="some()")

—выносим CSS из HTML во внешние файлы

—никогда не пишем inline стилей (style="color:red")

—и ещё разок для закрепления – не пишем inline!

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

<script>

function doSomething(){ /* … */ }

/* раздается хруст сломанных костей запястья, чтобы не печатал */

</script>

<style>

p { line-height:20px; }

/* крхххх… берцовая кость, и на работу уже не пойдет */

</style>

<div style="color:red;font-size:1.2em">

<p onclick="doSomething();">Lorem ipsum dolor sit amet...</p>

<!-- тыдыщь, головой об стол… насмерть. как жест милосердия -->

</div>

Неясно, почему же это плохо? Похоже, вам просто не приходилось менять дизайн для уже готового сайта :) Проясню суть проблемы: вам ставят задачу – надо поменять цвет шрифта для всех страниц сайта, коих может быть три десятка. Это могут быть не только HTML-файлы, а страницы какого-то шаблонизатора, разбросанные по двум десяткам папок (и это еще не самый плохой вариант). И тут появляется он — красный абзац. Вероятность услышать «слова поддержки» в адрес автора сего кода будет стремиться к единице. Насчет inlineобработчиков событий ситуация похожа, вот представьте себе — пишите вы JavaScript код, всё отлично, всё получается, пока вы не пытаетесь кликнуть по красному абзацу, он оказывается вам не подвластен, и живёт своей собственной жизнью, игнорируя все ваши усилия. Вы смотрите код, и опять кто-то услышит эти слова...

Применив четыре правила «красного абзаца» у вас должен будет получиться чистый и предсказуемый HTML код:

<div id="abzac">

<p>Lorem ipsum dolor sit amet...</p> </div>

18