CSS: правильное использование - залог успеха
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
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}
Кроме того, в каждом блоке селекторы надо расставить в алфавитном порядке. На первый взгляд, это не очень сильно упорядочит таблицу стилей, однако есть достаточно веская причина соблюдать такое правило. На первых порах вам будет абсолютно все равно, в каком порядке расположены селекторы в трех блоках, однако постепенно вы привыкните располагать селекторы именно в алфавитном порядке, вследствие чего в своих таблицах стилей будете ориентироваться легко, и быстро находить необходимые правила. Вы будете подсознательно чувствовать, что селектор .back находится в начале блока селекторов по классам, потому что начинается с буквы b, а селектор .vis - в конце, потому что начинается с буквы v.
Отдельно взятое правило тоже можно записать по-разному. Часто вместо того, чтобы записывать правило в одну строку
P {color: #000; font-size: 12px; padding-left: 1em}
используют запись в несколько строк:
P {
color: #000;
font-size: 12px;
padding-left: 1em}
Делается это для облегчения просмотра таблицы стилей. На мой взгляд, писать каждое объявление с новой строки лучше только для небольших таблиц, потому что большая таблица стилей при такой форме записи растянется на несколько экранов, и поиск нужного объявления только затруднится.
Для наглядности запись стилей в несколько строк используется в данной книге. Это улучшает восприятие, потому что длинных листингов кода мало.
Что касается самих свойств, то для них вы можете установить свои собственные правила. Давайте рассмотрим две совсем маленькие таблицы стилей.
Первая:
P.emphasize {
font-size: 14px;
text-indent: 1em;
color: #000;
font-style: italic}
TD {
font-style: italic;
color: #000;
font-size: 14px}
Вторая:
P.emphasize {
color: #000;
font-style: italic;
font-size: 14px;
text-indent: 1em}
TD {
color: #000;
font-style: italic;
font-size: 14px}
А теперь внимательно сравните их и ответьте на вопрос, какая структурирована лучше и почему? Подумайте две минуты, не читайте дальше.
Нашли ответ? Если да, то вы конечно согласитесь со мной, что вторая таблица выглядит более логичной. В правилах второй таблицы стилей свойство цвета идет на первом месте, затем следуют свойства шрифта, а зат