Некоторые из вас, возможно, помнят времена, когда 30KB было рекомендуемый максимальный размер веб-страницы, стоимость которых включена HTML, CSS, JavaScript, Flash, и изображения.
Я считаю, с каждым новым проектом даже с малейшей сложностью, it’ S незадолго до этого 30 KB идеального хорошо вне моей досягаемости.С ростом популярности макетов CSS и JavaScript-обогащенные опытом веб-страницы, it’ не редкость, особенно для больших сайтов, для работы с файлами CSS только прыгать далеко за рамки этого 30KB ceiling.
Но есть некоторые принципы для рассмотрения во время и после написания CSS, чтобы помочь держать ее крепко и оптимизированный. Оптимизация isn’ т просто сведение к минимуму файл size — it’ S также о том, организованной, удобна и эффективна.You’ обнаружите, что чем больше знаний у вас есть в отношении оптимальной практики CSS, меньший размер файла неизбежно придет, как прямой результат их реализации.Возможно, вы уже знакомы с некоторыми из принципов, упомянутых ниже, но они стоят отзыв.Будучи знакомым с этой концепции помогут вам написать оптимизированные CSS код и сделать вас лучше всех вокруг веб-designer.
1.Используйте Shorthand
Если you’ повторно уже не письмо в shorthand, you’ опоздали на вечеринку.Но, к счастью, эта партия никогда не заканчивается.Использование сокращенных свойств является одной простой практикой вы можете сделать, чтобы сократить ваш код (и кодирования времени).There’ нет лучшего времени, чем настоящее, чтобы начать этот эффективный практики кодирования, или рассмотреть it.
Margin, border, padding, background, font, list-style, и даже outline Все свойствами, которые позволяют сокращенную (и that’! Даже не обширного списка).
CSS Сокращенное означает, что вместо использования различных деклараций для соответствующих properties…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
… Вы можете использовать сокращенные свойства объединить эти значения так:
p { margin: 10px 20px 30px 40px; }
По указав различное количество значений, браузер будет интерпретировать правила в установленном порядке, показанном на диаграмме below.
Иллюстрация того, как сокращенную декларации интерпретируется в зависимости от того, сколько значения, указанные для собственности.Этот порядок применяется также к padding и border-width Среди других properties.
Шрифт является еще одним полезным свойством сокращения, которое помогает сэкономить комнату и keystrokes.
Примеры собственность сокращение шрифта.Примечание: оставить некоторые значения неопределенного будет означать, что эти свойства будут сброшены на начальные тирvalues.
Это лишь два примера стенографии, но отнюдь не должно рассматриваться как исчерпывающее руководство.Даже если вы знакомы с правилами выше, не забудьте взглянуть на статьи, указанные ниже для более полезным напоминанием о тех, мощные свойства, которые помогают сохранить ваш код кратким.Из-за большого количества строк и символов сохранен, переходя от предыдущей версии файла CSS которые не использовали сокращенные свойства против одного, что позволяет полностью использовать сокращенную может иметь огромное влияние на файл size.
Смотрите CSS Сокращенное Guide (dustindiaz.com) и Эффективный CSS с сокращением properties (456bereastreet.com) для получения дополнительной информации о сокращенной properties.
2.Топор Hacks
Jon Hick’ Блог hicksdesign.co.uk/journal используются условные comments
Хаки против мертвых браузеры безопасны, но хаки против живого aren’ T.Ни один из них.Ever.
Хранить CSS Simple – Peter-Paul Koch (Digitial-web.com)
Если you’ Re вроде меня, эти слова из Петропавловской Koch’ с почти 5-летнего статьи, может заставить вас чувствовать себя немного смущенно.В конце концов, кто hasn’ T служил хаки для Internet Explorer 6 и даже Internet Explorer 7?Как плохо, как мы хотим IE6 заложить шести пикселей при, правда, it’ S далеко от dead.
Но теперь мы знаем, что с помощью условных комментариев, чтобы служить hacks исправительных деклараций для IE6 и IE7 является общепринятой практикой, даже рекомендованные команды разработчиков Microsoft IE. Использование условных comments служить IE конкретных правил CSS имеет дополнительное преимущество служить чище, и, следовательно, меньшую, по умолчанию CSS файл для более стандартами браузеров, а только те браузеры, которые нуждаются в повозка, запряженная волами daiquri (т.е. IE) будетскачать дополнительные weight.
Here’ ы, как использовать условные комментарии, чтобы служить стили только для Internet Explorer 6:
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css"> <![endif]-->
Для IE7, вы можете использовать выше, и заменить “ 6″ для “ 7″.
Кроме того, если есть хак-менее способ получения желаемого результата, используя CSS, со всеми прочих равных, пойти на это!Чем меньше хаки вы должны написать, тем проще и легче code.
3.Используйте пробелы wisely
Пробелов, включая пробелы, табуляции и дополнительных строк, является важно для readability Код для CSS.Тем не менее, пробелы ничего добавить, однако незначительный это может быть, чтобы вес страницы.Каждый пространства, разрыв строки и вкладок можно устранить, как с однойменьше character.
Но это та область, где я не хотел бы призвать вас, чтобы манкировать только, чтобы получить меньший размер файла.It’ все еще важно, что вы пишете так, что читается вам (и, надеюсь, других), и если это включает использование пробелов для форматирования, так тому и быть.В конце концов, если вы can’ т читал, you’ будете иметь трудное время применения других принципов, изложенных в этой статье.Просто aware на то, что пробелы как воздух – Вы не могли бы видеть, но она весит something.
На рисунке ниже показаны две разные крайности в стиль форматирования, с большой пробел, а другой очень мало.Я, случается, пользу одной строки форматирования вариант без tabs, как я могу сканировать селекторы немного легче, и я разработки с использованием всей ширины моего широкоэкранного монитора.Но that’ только мне.Вам может понравиться вашим селекторы появляются вложенные, и ваши заявления на каждом line.
Иллюстрация из двух крайностей форматирования CSS: много пробелов против очень мало whitespace
Использование пробелов эффективно велик, и рекомендуемой практики для легкой в управлении кода, но помните, что чем меньше у вас есть пробелы, тем меньше файл.Даже если вы решите работать с пробелами с вашим рабочим файлом, вы можете выбрать, чтобы удалить его для производства версию вашего файла CSS, так что ваши файлы остаются тощими, где это действительно counts.
4.Чернослив рамки и resets
Nathan Smith’ S 960 Grid System CSS основы используется сброс rule.
Если you’ ве решили использовать CSS рамки (в том числе you’ нас написали сами), найдите время, чтобы ознакомиться с документацией , а также каждый line из файла CSS.Вы можете обнаружить, что структура включает в себя несколько правил, которые вы don’ T ухода использовать для текущего проекта, и они могут быть отсеяны.Кроме того, вы можете обнаружить, что база включает более элегантный и лаконичный способ достижения презентационные подробно, чем то, что вы обычно используете, и, зная о них поможет вам быстро дублирования наборов правил unintentionally.
Это касается сбрасывает, а также. YUI сетки CSS …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров