|
|
Библиотека Интернет Индустрии I2R.ru |
||
CSS: правильное использование - залог успехаНачинаем свой путь к мастерству. Он будет достаточно долгим и непростым, но вы справитесь, если у вас есть цель. По крайней мере, к этому моменту вы уже обладаете определенным багажом знаний, достаточным для применения на практике. Однако использовать CSS можно по-разному. Цель данной главы - научить вас применять CSS правильно. Поверьте, это не так просто, как кажется на первый взгляд. Ведь можно просто особо не задумываясь написать таблицу стилей с множеством классов и ненужных объявлений, которая будет корректно работать. Но такая таблица стилей будет неоптимальной и неудобной. Неоптимальной потому, что ее можно значительно сократить и уменьшить объем, что немаловажно. Неудобной потому, что разбираться в неупорядоченном нагромождении классов достаточно сложно. Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть множество рекомендаций. Кроме того, можно все же выделить одно главное правило, которое всегда надо применять при использовании CSS.
Итак, переходим непосредственно к рассмотрению способов, благодаря которым вы существенно облегчите код и собственную жизнь. Форматирование таблиц стилейГлавное требование - в таблице стилей должен быть порядок. Возьмем пример из предыдущей главы. Вот эта таблица:
Согласитесь, что разобраться в ней с первого взгляда не так-то просто. Здесь перемешаны все виды селекторов и нет никакого порядка. Структура таблицы непредсказуема и, что еще хуже, в ней совершенно отсутствует внутренняя логика построения, т. е. нет никаких правил, которые помогли бы найти нужное объявление. Учтите, что данная таблица очень маленькая, а в большой неупорядоченной таблице разобраться будет еще сложнее. Если попробовать мыслить логично, то можно вывести несколько правил, которые помогут организовать таблицу стилей. Как вы помните, существует несколько типов селекторов: элементы, классы, ID. Так что если формировать блоки по типам селекторов уже будет какой-то уровень организованности. Первое правило организации таблиц.
В нашем случае блок селекторов по элементам будет состоять из H3, P и BODY, второй блок из селекторов по классам будет состоять из .back и .bluecol, третий блок из селекторов по ID будет состоять из #mainmenu и #submenu. А таблица стилей будет выглядеть так:
Кроме того, в каждом блоке селекторы надо расставить в алфавитном порядке. На первый взгляд, это не очень сильно упорядочит таблицу стилей, однако есть достаточно веская причина соблюдать такое правило. На первых порах вам будет абсолютно все равно, в каком порядке расположены селекторы в трех блоках, однако постепенно вы привыкните располагать селекторы именно в алфавитном порядке, вследствие чего в своих таблицах стилей будете ориентироваться легко, и быстро находить необходимые правила. Вы будете подсознательно чувствовать, что селектор .back находится в начале блока селекторов по классам, потому что начинается с буквы b, а селектор .vis - в конце, потому что начинается с буквы v. Отдельно взятое правило тоже можно записать по-разному. Часто вместо того, чтобы записывать правило в одну строку
используют запись в несколько строк:
Делается это для облегчения просмотра таблицы стилей. На мой взгляд, писать каждое объявление с новой строки лучше только для небольших таблиц, потому что большая таблица стилей при такой форме записи растянется на несколько экранов, и поиск нужного объявления только затруднится. Для наглядности запись стилей в несколько строк используется в данной книге. Это улучшает восприятие, потому что длинных листингов кода мало. Что касается самих свойств, то для них вы можете установить свои собственные правила. Давайте рассмотрим две совсем маленькие таблицы стилей. Первая:
Вторая:
А теперь внимательно сравните их и ответьте на вопрос, какая структурирована лучше и почему? Подумайте две минуты, не читайте дальше. Нашли ответ? Если да, то вы конечно согласитесь со мной, что вторая таблица выглядит более логичной. В правилах второй таблицы стилей свойство цвета идет на первом месте, затем следуют свойства шрифта, а затем свойства текста, тогда как в первой таблице стилей нет никакой системы. Особенно это важно для больших таблиц стилей и в том случае, если вы записываете правило в одну строку. Для себя вы можете выработать какой угодно порядок расположения свойств, однако при написании таблиц стилей вы должны строго его придерживаться. Например, я всегда на первом месте ставлю цвет, на втором - свойства шрифта, на третьем - свойства текста, а затем поля, отступы и рамки. Повторяю, изначально порядок может быть любым, главное, чтобы вы его строго соблюдали и постепенно привыкали к нему.
Имена классов и IDПри верстке вам частенько придется вводить новые классы и как-то их называть. Естественным образом возникает желание, чтобы названия были короткими и логичными. Если класс для заголовков раздела назвать head1, то это будет достаточно логично и коротко, а если bigblacktext - нелогично и длинно. Конечно, часто встречаются ситуации, когда не получается придумать подходящее короткое имя, тогда приходится чем-то жертвовать: либо длиной, либо логичностью. Лично я предпочитаю жертвовать логичностью, потому что в своем коде я разберусь всегда. Однако если над проектом работает несколько HTML-верстальщиков и каждый из них создает какую-либо часть сайта, то лучше жертвовать длиной, потому что в этом случае логичность гораздо важнее. Согласитесь, далеко не каждый поймет, что класс aa обозначает, к примеру, отступ справа на 10 пикселов, тогда как класс rightpad10 об этом свидетельствует достаточно однозначно. Вообще вам все время придется балансировать на грани между объемом и логикой, важно сохранять баланс в большинстве случаев и четко представлять себе, когда его можно нарушить. Нарушить его можно в двух случаях.
Больше о правилах форматирования таблиц стилей ничего сказать нельзя. Перейдем к тому, как создавать оптимизированные таблицы. Оптимизация таблиц стилейВ любом деле оптимизация есть процесс желательный, а часто необходимый. Это естественно, потому что он несет всяческие выгоды, начиная с увеличения скорости работы приложения и заканчиваяуменьшением затрат. Если взять локальную область, такую как верстка сайтов и написание таблиц стилей в частности, то под оптимизацией понимается уменьшение объема кода, что приносит следующие выгоды:
Как видите, не стоит ждать от оптимизации каких-то чудес, но и пренебрегать ей не нужно, потому что это характеризует вас как профессионала и показывает ваше отношение к делу. Собственно говоря, стремление к оптимизации кода - одна из отличительных черт профессиональных HTML-верстальщиков. Существует несколько правил, которые могут помочь вам написать оптимизированную таблицу стилей. Стили по умолчаниюНе стоит писать ничего лишнего. Практически все свойства CSS имеют какое-либо значение по умолчанию. Не стоит явно их указывать. Например, стиль на элемент <P>, приведенный ниже
вообще не имеет смысла, потому что все эти значения для элементов <P> установлены по умолчанию. Зачем же их указывать явно? Конечно, возможны случаи, когда надо переписать установленный ранее стиль. Например, вы хотите, чтобы все элементы <H1> были подчеркнутыми и пишите стиль: H1 {
Но вдруг вам понадобилось, чтобы некоторые из заголовков первого уровня выводились неподчеркнутыми. Для этого вам придется ввести какой-нибудь дополнительный класс. Например, такой:
То есть вы первым правилом переписали значение по умолчанию для элементов <H1>, поэтому потом пришлось явным образом восстанавливать это значение для заголовков с классом nounderline. В этом случае другого выхода нет, но вообще если вам нет необходимости изменять стили элементов, то и не надо прописывать значения по умолчанию явным образом.
Сокращенные формы записиВторой способ сократить объем таблицы стилей - использование сокращенных форм записи некоторых свойств. В таблице они систематизированы.
Использование сокращенных форм записи является делом весьма полезным и нужным, потому что объем таблицы стилей при этом значительно уменьшается. Это видно уже из сравнения правого и левого столбцов табл. 5.1, но чтобы окончательно вас убедить, я приведу еще один несложный пример. Пусть нам надо создать блок rule, который имеет черную рамку толщиной один пиксел и внутренние отступы величиной 10 пикселов. Ширина блока будет 300 пикселов, а текст в нем будет выводиться полужирным шрифтом Verdana размером 12 пикселов. Если не пользоваться сокращенными формами записи вообще, то код будет такой:
Воспользуемся сокращенными формами записи, и правило для блока у нас получится такое:
Первое правило занимало 290 байт, а второе всего 96. Вес уменьшился в три раза, т. е. оптимизация достигла 300%! Конечно, этот пример показывает что будет, если не использовать сокращений вообще, но тем не менее он совершенно реальный и вам частенько придется создавать очень похожие блоки, так что примите к сведению эти 300%. ГруппировкаДля оптимизации таблиц стилей надо с умом применять группировку. Как вы уже знаете, группировка - это объединение селекторов с одинаковыми объявлениями. Однако из этого определения не вытекает достаточно неочевидное утверждение, что группировать селекторы можно только в том случае, если они содержат совершенно одинаковые объявления. Например, у нас есть такая таблица стилей:
Ее можно оптимизировать так:
Получилось очень компактно, но зато логика таблицы стилей сильно пострадала. Если вам понадобится изменить какое-либо объявление в элементе <P>, то в большой таблице вы его можете искать очень долго, потому что селекторы на этот элемент будут располагаться в разных местах. Запомните правило.
Это означает, что в нашем примере мы можем объединить только селекторы на элементы <BODY> и <TD>, а селекторы на элемент <P> надо свести в один, как того требует правило:
Кроме того, если вы захотите, скажем, добавить в таблицу стилей фон страницы, то придется разбить группу селекторов BODY и TD, потому что стили к ним уже не будут совершенно одинаковыми. Вот нам, к примеру, понадобилось добавить фоновый цвет на элемент <BODY>. Тогда придется разбить группу, и таблица стилей будет выглядеть так:
Строчные и прописныеЧто касается манеры записи селекторов, то селекторы элементов я рекомендую писать заглавными буквами, тогда как все остальные - строчными. На самом деле это не играет большой роли, потому что CSS регистронезависимый язык, т. е. разницы между прописными и строчными буквами нет, поэтому все решает привычка. Объявления я тоже рекомендую писать строчными буквами, хотя это опять же дело привычки. Вот практически все основные правила написания компактных и корректных таблиц стилей. Давайте сейчас оптимизируем отдельно взятую таблицу стилей, чтобы окончательно на практике закрепить полученные знания. Оптимизация на практикеИсходная таблица у нас страшно неорганизованная и запутанная:
Разобраться в ней непросто. Как видите, здесь нарушены все правила, описанные в этой главе. Начнем все исправлять и упорядочивать. Прежде всего разобьем таблицу стилей на три блока по селекторам: элементы, классы, ID, а в каждом блоке расположим селекторы в алфавитном порядке. Цифры обозначают порядковый номер строки и к самой таблице стилей не относятся. Получится так:
Пойдем дальше. Для начала займемся правилами для ссылок, которые находятся в строках 1-4. Заранее договоримся, что в объявлениях стилей сначала будет идти цвет и фон, затем шрифт, затем поля и отступы. Итак:
Получится вот что:
Заметьте, что последние два селектора имеют совершенно одинаковые объявления, так что можно смело их сгруппировать:
Займемся строками 5-7:
Объявление стилей на элемент <BODY> содержит четыре отступа, причем все они имеют значение 0, так что можно смело вместо всех четырех отступов использовать сокращенную форму записи, кроме того, надо переписать все свойства строчными буквами:
В шестой строке на первый взгляд все правильно, однако в свойстве font-family указан только один шрифт. Укажем кроме него еще и шрифтовое семейство, в данном случае это monospace. Кроме того, названия шрифтов из двух и более слов рекомендуется заключать в кавычки:
В седьмой строке запишем название селектора em большими буквами, переместим в начало свойство color и заменим значение black на #000.
Теперь рассмотрим строки 8-10:
Восьмая строка практически правильная, надо только переписать селектор input заглавными буквами. В строке 9 надо:
Получится так:
В десятой строке можно кое-что сократить. Заметьте, что верхнее и нижнее поля имеют значение 1 пиксел, а левое и правое - 2 пиксела. Это можно записать сокращенно с помощью объявления margin: 1px 2px. Кроме того, надо в объявлении рамок поменять значение цвета black на #000. Тогда десятая строка будет такой:
А сейчас сравните исправленные строки 8 и 10. Они совершенно одинаковые, т. е. можно сгруппировать селекторы INPUT и TEXTAREA:
С блоком селекторов по элементам мы разобрались, так что перейдем к классам:
Здесь надо в строке 11 переписать название класса EXAMPLE и свойство BORDER строчными буквами, а также написать значение цвета в сокращенной форме. Строка 12 теперь полностью корректна. А в строке 13 надо переписать свойство FONT строчными буквами:
Остался блок контекстных селекторов:
Здесь надо только записать цвета в сокращенной форме и сгруппировать селекторы 14 и 15, а также 16 и 17:
Вся обновленная таблица стилей будет выглядеть следующим образом:
Как видите, таблица стилей стала значительно более структурированной и читаемой. Кроме того, первоначальная таблица весила 877 байт, а оптимизированная таблица весит 677 байт (если убрать переводы строк и лишние пробелы перед каждым объявлением). Мы смогли уменьшить вес таблицы стилей на 23%, что само по себе не так уж мало. К тому же она стала более логичной, так что теперь найти нужное объявление или селектор не составит труда. Это и есть цель данной главы - научиться создавать легкочитаемые и компактные таблицы стилей, а также оптимизировать старые, уже созданные ранее. Надеюсь, вы возьмете на вооружение описанные здесь способы организации и оптимизации таблиц стилей, потому что в противном случае созданные вами таблицы будут выглядеть непрофессионально. Стремление к совершенству - хорошее качество. Эта глава является одной, пусть и маленькой, но все же ступенькой на пути к нему. Copyright 2002 Михаил Дубаков из книги Веб-мастеринг средствами CSS |
|
 |
 |
2000-2008 г. Все авторские права соблюдены. |
|
 |
|
