CSS: правильное использование - залог успеха
    Михаил Дубаков
    Начинаем свой путь к мастерству. Он будет достаточно долгим и непростым, но вы справитесь, если у вас есть цель. По крайней мере, к этому моменту вы уже обладаете определенным багажом знаний, достаточным для применения на практике. Однако использовать CSS можно по-разному. Цель данной главы - научить вас применять CSS правильно. Поверьте, это не так просто, как кажется на первый взгляд. Ведь можно просто особо не задумываясь написать таблицу стилей с множеством классов и ненужных объявлений, которая будет корректно работать. Но такая таблица стилей будет неоптимальной и неудобной. Неоптимальной потому, что ее можно значительно сократить и уменьшить объем, что немаловажно. Неудобной потому, что разбираться в неупорядоченном нагромождении классов достаточно сложно. Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть множество рекомендаций. Кроме того, можно все же выделить одно главное правило, которое всегда надо применять при использовании CSS. Правило
    Прежде чем написать какой-нибудь стиль или ввести новый класс, задумайтесь, нельзя ли оптимизировать и упорядочить код другим способом. Сделать так, чтобы не вводить этот класс или ввести максимально широко. Логика - незаменимый помощник любого профессионального веб-мастера. Запомните это.
    Итак, переходим непосредственно к рассмотрению способов, благодаря которым вы существенно облегчите код и собственную жизнь. Форматирование таблиц стилей
    Главное требование - в таблице стилей должен быть порядок. Возьмем пример из предыдущей главы. Вот эта таблица:
    P {color: #000; font: x-small Verdana}
    BODY {background: #FFF}
    #mainmenu A {color: #000; font: bold small Arial}
    H3 {color: #000; font-family: Arial}
    .back {background: url(img/fragment_3.gif) no-repeat;}
    #submenu A {color: #FFF; font: bold xx-small Arial}
    .bluecol {background: #1d3d4e}
    Согласитесь, что разобраться в ней с первого взгляда не так-то просто. Здесь перемешаны все виды селекторов и нет никакого порядка. Структура таблицы непредсказуема и, что еще хуже, в ней совершенно отсутствует внутренняя логика построения, т. е. нет никаких правил, которые помогли бы найти нужное объявление.
    Учтите, что данная таблица очень маленькая, а в большой неупорядоченной таблице разобраться будет еще сложнее. Если попробовать мыслить логично, то можно вывести несколько правил, которые помогут организовать таблицу стилей.
    Как вы помните, существует несколько типов селекторов: элементы, классы, ID. Так что если формировать блоки по типам селекторов уже будет какой-то уровень организованности. Первое правило организации таблиц. Совет
    Разделяйте селекторы, т. е. сформируйте первый блок из селекторов по элементам, второй блок из селекторов по классам, а третий блок из селекторов по ID. Блоки друг от друга можно отделять дополнительным переводом строки.
    В нашем случае блок селекторов по элементам будет состоять из H3, P и BODY, второй блок из селекторов по классам будет состоять из .back и .bluecol, третий блок из селекторов по ID будет состоять из #mainmenu и #submenu. А таблица стилей будет выглядеть так:
    BODY {background: #FFF}
    H3 {color: #000; font-family: arial}
    P {color: #000; font: x-small Verdana}
    
    .back {background: url(img/fragment_3.gif) no-repeat;}
    .bluecol {background: #1d3d4e}
    
    #mainmenu A {color: #000; font: bold small arial}
    #submenu a {color: #fff; font: bold xx-small arial}
    Кроме того, в каждом блоке селекторы надо расставить в алфавитном порядке. ............