15 инструментов для аудита и оптимизации кода CSS. Оптимизация css кода
15 инструментов для аудита и оптимизации кода CSS
Созданный сайт будет постоянно расширяться, и однажды вы осознаете, насколько трудно разобраться в его CSS.
Если вы уже столкнулись с подобной проблемой, то пришло время провести аудит вашего CSS-кода и оптимизировать его. Мы отобрали 15 инструментов, которые помогут вам сделать это. Некоторые из них помогут уменьшить размер файла с CSS, другие поспособствуют повышению производительности страниц.
1. Type-o-Matic
Type-o-matic представляет собой Firebug-плагин, который умеет анализировать шрифты, использованные на страницах сайта. Этот плагин выводит отчет в виде таблицы с информацией о свойствах используемых шрифтов (семейство, размер, цвет и другое).
Несмотря на то, что отчет представлен в табличном виде, вы сможете без труда редактировать этот список, скомбинировав или удалив похожие по стилю шрифты.
2. CSSCSS
Инструмент анализирует ваши CSS-файлы на наличие дублей. Это позволит уменьшить размер CSS и гораздо удобнее работать с ними в дальнейшем. Инструмент очень прост в установке – он реализован в виде пакета расширения для Ruby, и запускается из командной строки.
3. CSS Lint
Это средство поможет выявить проблемы в вашем CSS-коде. Инструмент проверяет основной синтаксис стилей, а также применяет набор правил к коду, который вызывает подозрения. Все правила подключаемые, поэтому вы сможете без труда их изменить.
4. CSS Colorguard
Зачастую попадаются клиенты, желающие использовать такие цвета, о существовании которых вы даже не подозревали. CSS Colorguard поможет составить необходимые цветовые схемы, и предупредит в том случае, если вы используете два одинаковых цвета.
5. CSS Dig
CSS Dig — это скрипт, написанный на Python, который запускается локально, и позволяет проанализировать свойства и значения CSS практически любого сайта, независимо от того, располагаются ли стили в отдельном файле или в коде страницы. Инструмент также помогает изменять, стандартизировать и оптимизировать CSS-код.
6. Dust Me
Dust-Me – плагин для Firefox и Opera, который выводит неиспользуемые селекторы из таблицы стилей. Инструмент берет весь CSS вашего сайта, и показывает, какие именно селекторы используются, а какие лишние.
7. Devilo.us
Devilo.us – продвинутый движок для сжатия и оптимизации CSS-кода, который теперь поддерживает CSS3.
8. PurifyCSS
Инструмент помогает избавиться от неиспользуемых CSS-стилей на страницах сайта или в веб-приложениях. Способен определять даже динамически загружаемые CSS-селекторы в javascript-коде, и существенно сжимать размер файлов стилей.
9. Atomic CSS
Atomic CSS поможет уменьшить CSS-файлы. Он позволяет оптимизировать скорость загрузки страниц, исключает зависимости, а также умеет многое другое.
10. Clean CSS
CleanCSS представляет собой многофункциональный CSS-оптимизатор. Инструмент берет ваш CSS-код и делает его чище и меньше в объеме. Вы можете оптимизировать код, написанный на разных языках: javascript, json, python, html и т. д.
11. PubCSS
Инструмент облегчает форматирование CSS-кода страниц академических изданий. Это библиотека CSS-стилей для форматирования документов под печать и публикацию в интернете.
12. CSSO
13. Helium
Helium – это инструмент для выявления неиспользуемых CSS-свойств на всех страницах сайта. Он основан на javascript и работает прямо в браузере. Helium принимает список URL-адресов разделов сайта, а затем анализирует каждую страницу для последующего составления списка всех стилей. После чего выявляет не использующиеся свойства CSS.
14. Strip Comments
Strip CSS Comments значительно облегчает следующие задачи: удаление комментариев из CSS-файлов, уменьшение размеров файлов. Он также доступен в виде плагина для gulp/grunt/broccoli.
15. CSS Shrinks
Инструмент позволяет без труда оптимизировать CSS-файлы, сохраняя последовательность и формат разметки. В нем есть несколько средств, которые позволяют удалять в документе пробелы и комментарии.
Возможно, у вас на примете есть еще какие-нибудь полезные CSS-инструменты? Пожалуйста, поделитесь ими в комментариях!
Перевод статьи “15 CSS Tools to Audit and Optimize Your CSS Code” был подготовлен дружной командой проекта Сайтостроение от А до Я.
Оптимизация CSS кода собственными ручками
Подробности Категория: Оптимизация Опубликовано 29.02.2012 11:11Оптимизация CSS как элемент оптимизации всего сайта
Оптимизацией CSS кода я называю как сокращение кода (сокращение пробелов, расстояний между строк внутри файла .css),так и упрощение или удаление всего лишнего. Вот примерупрощения: color:#036 вместо color:#003366 или padding:1px 0 вместо padding:1px 0 1px 0. Так можно добиться ещебольшего эффекта: h2,h3,h4{font-size:14px;color:#334} вместо h2 {font-size:14px; color:#334}, h3 {font-size:14px; color:#334}, h4{font-size:14px; color:#334}. В итоге мы имеем меньший вес или размер каждой отдельной страницы сайта, выраженный в байтах или килобайтах. Так при прочих равных условиях более высоко в поисковой выдаче будет находится страница с меньшим размером (сомневаюсь, что существуют
абсолютно одинаковые страницы в плане оптимизации, размера или количества входящих ссылок, но данный фактор обязательно нужно учитывать).
На момент написания статьи два мои .css файла, что на ab-w.net не оптимизированы, но это первое, чем я займусь в ближайшее время.
Оптимизация CSS, если мы говорим о большой посещаемости сайта и соответственно большом количестве просмотров его отдельных страниц, может в каком-то процентном соотношении снизить нагрузку на сервер хостинга. Особенно это актуально для тарифов с ограниченным трафиком. Но большой посещаемости сайта (1000 - 10 000 человек в сутки) еще нужно добиться, а помочь в этом призвана оптимизация (сюда стоит включить оптимизацию HTML кода, оптимизацию или уменьшение размера, но и качества изображений, не использование или минимальное использование JavaScript посредством подключения внешних файлов, отказ от Flash, удобная и понятная для пользователей навигация по сайту, минимальное количество любой рекламы, отказ от продажи ссылок, что в общем является составляющей поисковой оптимизации сайта в целом → SEO). Такая вот головоломка.
Еще по нашей теме
ab-w.net
Принципы чистого кода и оптимизация CSS
4 мин. на прочтение
Слишком часто крупные (да и мелкие) сайты страдают от слишком разросшегося, и по сути, избыточного CSS кода, где можно найти большое количество лишних элементов, слишком длинные и конкретизированные выражения, большую зависимость одних селекторов от других, частое и нецелесообразное использование !important и так далее… Для оптимизации наших таблиц стилей, мы конечно же можем воспользоваться какими-то базовыми основами написания CSS кода. Что мы действительно должны делать, так это добиваться хорошего структурирования таблиц стилей и стремиться к повышению устойчивости к высоким нагрузкам.
Итак, наш подход будет заключаться в двух принципах. Во-первых, мы должны использовать базовые правила написания чистого и эффективного CSS кода. Во-вторых, нам необходимо применять различные методы и подходы для организации хорошей архитектуры кода и вывода наших таблиц стилей на новый уровень.
В этом уроке мы затронем эти темы, но перед этим давайте посмотрим на несколько примеров очистки CSS кода.
Несколько полезных методов
Частенько чей-то чужой опыт бывает очень полезным. Давайте рассмотрим несколько примеров:
Быстрый доступ к элементам
Очень важно иметь возможность получать быстрый доступ к какому-то стилю прямо со страницы. Для этого можно воспользоваться различными инструментами, такими как Explorer Developer Toolbar, Mozilla Firebug или Chrome Developer Tools. Используя данные инструменты, мы можем быстро находить то, что нам нужно, и тут же менять, видя результат.
В данном фрагменте присутствует свойство outline. Оно используется для одновременного присвоения цвета, стиля и толщины внешней границы на всех четырех сторонах элемента. Тут я выбрал слово red для определения цвета границы и заметьте, не просто так. Для определения конечных цветов всегда пользуйтесь rgb или hsl кодами, а для временных – цельными словами. Это поможет вам в будущем быстро найти нужные фрагменты и устранить спорные моменты, возникшие во время разработки. Будьте осторожны с использованием свойства outline, т.к. оно не работает в Internet Explorer 8.
Добавление тестовых стилей
Ещё одной хорошей практикой является добавление отступа для каких-то тестовых или временных свойств.
Благодаря данной технике вы сможете сразу же определить, какие свойства временные, а какие нет. Если вы решили, что запись может остаться, просто уберите отступ.
Отключение стилей
Часто при написании CSS кода нам нужно отключать какие-то стили. Мало кто знает, но для этого можно к свойству приписать префикс “x-”:
.social a { -moz-transition: opacity 0.3s ease 0s; x-display: block; height: 35px; opacity: 0.4; }Этот способ быстрее, чем комментирование. Также это может упростить поиск таких спорных селекторов.
Очистка и оптимизация CSS кода
Теперь, когда мы познакомились с несколькими трюками, давайте поговорим о том, как можно очистить наш CSS код. Тут будем идти от большего к меньшему. В первую очередь, рассмотрим, как лучше написать HTML код, а затем, как написать для него эффективный стиль.
Макро-оптимизация
Прежде чем приступить к оптимизации таблиц стилей, нам нужно написать хорошо читабельный HTML и CSS код.
Формирование информации и определение структуры таблицы стилей
Если речь касается разбора таблиц стилей, то я первым делом пишу её содержание. Такая информация, как знание о существующих группах селекторов, их расположении в файле, может быть очень полезна.
В первую очередь, я рекомендую вставлять какую-то информацию о пользователе (имя, …), время последней правки файла. Данный приём может сыграть свою роль, если в будущем возникнут какие-то вопросы, связанные с этими данными.
/* информация о таблице стилей для XyZ Corp Файл создан: 09.15.2010 Последнее обновление: 06.04.2012 Автор: [name] */ Также я рекомендую писать содержание файла, чтоб вы и другие разработчики в случае необходимости смогли быстро сориентироваться. /* Содержание - Стили ссылок - Стили для разных размеров экранов - Действия - Основной макет - Лого - Верхняя навигация - Боковая навигация - Поднавигация */ … (а у каждой отдельной секции…) /* =Верхняя навигация */Знак “=” в последнем выражение используется исключительно для упрощения поиска отдельно взятой секции.
Аннотации и отображение вложенность
Аннотации и отображение вложенности элементов помогают разработчику отследить начало и конец какого-то блока. Таким образом, отдельные кусочки кода будут быстро находиться.
Аннотации формируются с помощью следующих выражений: < !— #id или .class name —> < !— /end #id или .class name —> или просто < !— / #id or .class name —>.
Отображение вложенности элементов может показаться шагом излишним, но он позволяет значительно упростить читабельность кода, сделать элементы визуально понятными, быстро найти проблемные места, включая места с пропущенными закрывающимися тегами, и так далее.
Разницу между хорошо и плохо структурированным кодом, вы можете увидеть в следующих примерах.
До
<body> <div> <div> <h2>Website Title</h2> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div>computy.ru
