Когда мы сталкиваемся со все более большими файлами CSS и Javascript в проектах веб-сайтов, будь то для вторичной разработки или анализа браузера, их коды должны быть оптимизированы, но оптимизация не означает простое сжатие или уменьшение размера файла. Четкая организация и высокая операционная эффективность – это те результаты, которые мы хотим. Итак, какие существуют методы улучшения нашего CSS-кода? Давайте рассмотрим некоторые предложения ниже.
1. Использование
сокращений может сократить ваше рабочее время и уменьшить размер файлов. Почему бы и нет?
Установите разные значения для аналогичных различий:
просмотреть обычную копию в буфер обмена, распечатать?
п {
маржа сверху: 10 пикселей;
поле справа: 20 пикселей;
поле внизу: 30 пикселей;
поле слева: 40 пикселей;
}
п {
маржа сверху: 10 пикселей;
поле справа: 20 пикселей;
поле внизу: 30 пикселей;
поле слева: 40 пикселей;
}
Используйте сокращения:
просмотреть обычную копию в буфер обмена, распечатать?
p { поле: 10 пикселей 20 пикселей 30 пикселей 40 пикселей }
p { поле: 10 пикселей 20 пикселей 30 пикселей 40 пикселей };
Давайте посмотрим на сокращения часто используемых шрифтов.
Ознакомьтесь с Руководством по сокращенным обозначениям CSS (на английском языке) и «Эффективный CSS с сокращенными свойствами» (на английском языке), чтобы узнать больше о сокращенных свойствах.
2. Избегайте использования хаков
Блог Джона Хика hicksdesign.co.uk/journal Использование условных комментариев браузера
Взлом — это плохая вещь, он будет определять один и тот же код для разных браузеров, что делает CSS громоздким. Теперь мы знаем, что вместо хаков можно использовать условные комментарии, они принимаются в IE6 и IE7, и даже команда IE рекомендует их использовать. Используйте условные комментарии для обслуживания кода CSS, специфичного для функций браузера. Поэтому для обслуживания браузеров, соответствующих стандартам, используется меньший основной код CSS. Он будет загружен только при возникновении необходимых условий (например, дополнительных файлов CSS). !
Давайте посмотрим на пример кода с использованием условных комментариев в IE6:
просмотреть обычную копию в буфер обмена, распечатать?
<!--[если IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
<!--[если IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
Этот код заставляет IE6 загружать дополнительный файл ie6.css для анализа выделенного ему CSS-кода. Аналогично, если вы ориентируетесь на IE7, просто замените 6 и 7 выше.
3. Используйте пробелы.
Будь то для собственного чтения или вторичной разработки, вы должны поддерживать хорошую читаемость CSS. Пробелы играют ключевую роль.
Мы не рекомендуем вам удалять все форматирование пробелов, например табуляции, разрывы строк, пробелы и т. д., чтобы получить файл CSS меньшего размера. Вложенный код рекомендуется выделять табуляцией, а все атрибуты располагать на отдельной строке.
Сравнивая картинки выше и ниже, какой формат поможет вам сэкономить больше времени на доработках? Пустое пространство облегчит вам управление кодом.
4. Удалить лишние фреймворки и ресеты
Сброс правил, используемых CSS-фреймворком 960 Grid System Натана Смита.
Если вы решите использовать CSS-фреймворк, включая тот, который вы написали самостоятельно, если вы проверите код, вы обязательно обнаружите, что некоторые правила, содержащиеся в фреймворке, не применимы к вашему текущему файл можно удалить.
О чем можно думать, так это о сбросе. Сброс, используемый YUI Grid CSS, и сброс Эрика Мейера в настоящее время очень популярны. Они могут удалять стили по умолчанию в разных браузерах, чтобы страница вела себя одинаково во всех браузерах. Но они обычно содержат все атрибуты, необходимые для большого веб-сайта. Некоторые атрибуты, такие как pre, code, sub, dfn, var и т. д., вообще не используются для обычных веб-сайтов. Удалите те, которые вы не можете использовать. Эрик Мейер посоветовал бы вам сделать то же самое!
Framework и сброс очень хорошо помогут вашей работе, но если вы не удалите те варианты использования, которые вам не нужны, это снизит эффективность и читабельность ваших страниц.
5. Расширенный CSS
Stopdesign.com CSS от Дуга Боумана. Используйте специальные селекторы для слоев.
Еще один способ оптимизировать код — объявить определенные свойства для каждого слоя.
6. Документируйте свою работу
При командном сотрудничестве чрезвычайно важно сообщать о стандартах написания, стандартах кодирования, методах аннотирования и стиле. Правила основаны на последовательном подходе к стандартам. Это не позволит другим дублировать уже проделанную вами работу и предотвратит расширение кода.
7. Используйте сжатие.
Чтобы сэкономить браузеру больше времени на загрузку и загрузку, сжатие является хорошим решением, но только при публикации. YUI Compressor и CSSTidy являются экспертами в этой области. Они могут удалять лишний код и проверять ошибки, когда свойства перекрывают друг друга.
Многие популярные редакторы, такие как BBEdit, TextMate и TopStyle, могут помочь вам отформатировать ваш CSS-код так, как вы этого хотите. Вы также можете использовать PHP для обработки CSS с помощью технологии серверного сжатия. Вы можете найти больше инструментов CSS для оптимизации и сжатия CSS.
В какой-то момент эти процедуры сводили к минимуму возникновение ошибок, но они не были идеальными. Аналогично, лучше не использовать их в файлах, содержащих хаки CSS. Это еще одна причина хранить хаки в отдельных файлах.
Заканчивать
------------------------------------------------- ----------------------------------
Чистый и оптимизированный код — это не только размер файла, но и ремонтопригодность и удобство чтения. Вышеупомянутые принципы применимы не только к CSS, их также можно применять к HTML, Javascript и другим языкам программирования. CSS-файлы предназначены не только для представления конечному пользователю вашего веб-сайта. Вышеупомянутые принципы могут помочь как пользователям, так и разработчикам. Примените эти принципы в своих будущих проектах, и вы обязательно добьетесь значительных результатов.