CSS: правильное использование - залог успеха
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
ем свойства текста, тогда как в первой таблице стилей нет никакой системы. Особенно это важно для больших таблиц стилей и в том случае, если вы записываете правило в одну строку.
Для себя вы можете выработать какой угодно порядок расположения свойств, однако при написании таблиц стилей вы должны строго его придерживаться. Например, я всегда на первом месте ставлю цвет, на втором - свойства шрифта, на третьем - свойства текста, а затем поля, отступы и рамки. Повторяю, изначально порядок может быть любым, главное, чтобы вы его строго соблюдали и постепенно привыкали к нему.
Совет
Сформулируйте раз и навсегда свои собственные правила структуры таблицы стилей и соблюдайте их неукоснительно. Привычка - мощный инструмент увеличения производительности.
Имена классов и ID
При верстке вам частенько придется вводить новые классы и как-то их называть. Естественным образом возникает желание, чтобы названия были короткими и логичными. Если класс для заголовков раздела назвать head1, то это будет достаточно логично и коротко, а если bigblacktext - нелогично и длинно. Конечно, часто встречаются ситуации, когда не получается придумать подходящее короткое имя, тогда приходится чем-то жертвовать: либо длиной, либо логичностью. Лично я предпочитаю жертвовать логичностью, потому что в своем коде я разберусь всегда. Однако если над проектом работает несколько HTML-верстальщиков и каждый из них создает какую-либо часть сайта, то лучше жертвовать длиной, потому что в этом случае логичность гораздо важнее. Согласитесь, далеко не каждый поймет, что класс aa обозначает, к примеру, отступ справа на 10 пикселов, тогда как класс rightpad10 об этом свидетельствует достаточно однозначно. Вообще вам все время придется балансировать на грани между объемом и логикой, важно сохранять баланс в большинстве случаев и четко представлять себе, когда его можно нарушить. Нарушить его можно в двух случаях.
Если вы профессионал и работаете над HTML-кодом сайта в одиночку.
Если вам до зарезу надо максимально уменьшить объем кода и важным становится каждый лишний байт.
Больше о правилах форматирования таблиц стилей ничего сказать нельзя. Перейдем к тому, как создавать оптимизированные таблицы.
Оптимизация таблиц стилей
В любом деле оптимизация есть процесс желательный, а часто необходимый. Это естественно, потому что он несет всяческие выгоды, начиная с увеличения скорости работы приложения и заканчивая уменьшением затрат. Если взять локальную область, такую как верстка сайтов и написание таблиц стилей в частности, то под оптимизацией понимается уменьшение объема кода, что приносит следующие выгоды:
незначительно ускоряется загрузка страниц;
писать и редактировать таблицу стилей становится несколько проще по причине уменьшения числа селекторов и свойств, что в конечном итоге ведет к экономии времени, пусть и незначительной.
Как видите, не стоит ждать от оптимизации каких-то чудес, но и пренебрегать ей не нужно, потому что это характеризует вас как профессионала и показывает ваше отношение к делу. Собственно говоря, стремление к оптимизации кода - одна из отличительных черт профессиональных HTML-верстальщиков.
Существует несколько правил, которые могут помочь вам написать оптимизированную таблицу стилей.
Стили по умолчанию
Не стоит писать ничего лишнего. Практически все свойства CSS имеют какое-либо значение по умолчанию. Не стоит явно их указывать. Например, стиль на элемент , приведенный ниже
P {
font-style: normal;
letter-spacing: normal;
text-decoration: none}
вообще не имеет смысла, потому что все эти значения для элементов были подчеркнутыми и пишите стиль:
H1 {
text-decoration: underline;}
Но вдруг вам понадобилось, чтобы некоторые из заголовков первого уровня выводились неподчеркнутыми. Для этого вам придется ввести какой-нибудь дополнительный класс. Например, такой:
H1.nounderline {
text-decoration: none}
То есть вы первым правилом переписали значение по умолчанию для элементов , поэтому потом пришлось явным образом восстанавливать это значение для заголовков с классом nounderline. В этом случае другого выхода нет, но вообще если вам нет необходимости изменять стили элементов, то и не надо прописывать значения по умолчанию явным образом.
Правило
Не указывайте в таблице стилей значений, которые являются для данного элемента значениями по умолчанию.
Сокращенные формы записи
Второй способ сократить объем таблицы стилей - использование сокращенных форм записи некоторых свойств. В таблице они систематизированы.
Сокращенная формаВходящие свойстваfont: italic small-caps 12px/140% Tahoma, sans-serif font-style: italic
font-variant: small-caps
font-weight: normal
font-size: 12px
line-height: 140%
font-family: Tahoma, sans-serifmargin: 1em 2em 0 1em margin-top: 1em
margin-right: 2em
margin-bottom: 0em
margin-left: 1empadding: 10px 20pxpadding-top: 10px
padding-right: 20px
padding-bottom: 10px
padding-left: 20pxborder: 1px solid #000
border-top: 1px solid #000
border-right: 1px solid #000
border-bottom: 1px solid #000
border-left: 1px solid #000border-width: 1px
border-style: solid
border-color: #000background: url("backgr.gif") #FFF repeat-xbackground-color: #FFF
background-image: url("backgr.gif")
background-repeat: repeat-x
background-attachment: scroll
background-position: 0px 0pxИспользование сокращенных форм записи является делом весьма полезным и нужным, потому что объем таблицы стилей при этом значительно уменьшается. Это видно уже из сравнения правого и левого столбцов ?/p>