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

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

• выносим JavaScript во внешние файлы
• никогда не пишем inline обработчиков событий «onclick="some()"»
• выносим CSS во внешние файлы
• никогда не пишем 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>

Стили можно будет легко повесить на <div> с идентификатором, как, собственно, и обработчик событий для нашего параграфа.

Абзац — не параграф, но для красного словца и лёгкости усвоения сгодится