3 полезных инструмента для оптимизации CSS вашего блога

CSS означает каскадные таблицы стилей, что является важным аспектом современного веб-дизайна. Если вы веб-дизайнер и знаете, как создавать темы WordPress или шаблоны для блоггеров, вы больше не можете игнорировать CSS. Однако, если у вас есть блог и вы хотите оптимизировать файлы CSS для повышения производительности и ускорения загрузки, вот все необходимые инструменты.

Как найти файл CSS в шаблоне блога

Если ваш блог находится на WordPress, тогда файл CSS лучше всего поместить в папку тем в wp-content / themes / yourtheme. Чтобы узнать точное местоположение, откройте свой блог и проверьте исходный код страницы. Вы найдете ссылку на CSS своей темы, как показано ниже

Если ваш блог находится в Blogger, откройте панель управления Blogger и перейдите на вкладку "Макет". Выберите "Редактировать HTML" и установите флажок "Развернуть шаблоны виджетов". Затем скопируйте код CSS в файл блокнота, определенный сразу после открывающего тега тела.

Загрузите копию этого файла и внесите изменения, описанные в этом руководстве. Было бы лучше, если вы сделаете резервную копию таблицы стилей, потому что, если что-то пойдет не так, вы сможете восстановить дизайн своего сайта, используя резервную копию.

Оптимизируйте код CSS

Отформатируйте код CSS

Первый шаг к оптимизации любого кода CSS - правильное форматирование. Вам следует тщательно отформатировать элементы стиля и атрибуты, чтобы их было легко понять. Более того, код должен быть написан так, чтобы он не пересекался с другими классами или идентификаторами. Форматирование кода вручную - сложная задача, и вы можете использовать инструмент "Форматирование CSS", чтобы начать работу.

Скопируйте таблицу стилей, которую вы хотите отформатировать, и вставьте ее в текстовое поле. Затем выберите предпочтительные правила форматирования на правой панели.

Например: вы можете вставить новую строку после свойства CSS каждого тега div. Вы также можете удалить все пробелы, помещенные после точки с запятой. Установите все правила, которые должна выполнять программа, а затем нажмите кнопку "Форматировать CSS". Все указанные правила будут применены, и код будет отформатирован, как показано ниже:

Оптимизируйте CSS, чтобы удалить лишнее

Теперь, когда вы отформатировали код для удобства чтения, пришло время его оптимизации. Перейдите в Онлайн-оптимизатор CSS и вставьте весь код в предоставленное текстовое поле. Вы также можете ввести URL-адрес вашего файла CSS, если хотите.

Этот инструмент можно использовать для следующих целей:

• преобразовать все цветовые значения RGB в шестнадцатеричные, тем самым уменьшив накладные расходы и повысив эффективность.
• удалите все комментарии и пробелы.
• оптимизировать значения границ до современных показателей. Например: атрибут border: 2px 5px 2px 5px изменен на border: 2px 5px ;.
• преобразовать абсолютные значения в относительные. Например: атрибут font-size: 18px; можно изменить на font-size: 2em;
• преобразует несколько атрибутов background, font, margin, padding, list в один атрибут.

Очистите файл CSS и уменьшите его размер

Пришло время очистить код CSS от ошибок и уменьшить размер файла. Уменьшение размера CSS важно, так как это влияет на время загрузки страниц вашего блога. Перейдите в раздел "Очистить CSS" и вставьте код CSS, который вы оптимизировали на предыдущем шаге. Выберите самый высокий режим сжатия и выберите параметры, показанные ниже.

Чистый CSS основан на CSS Tidy и может использоваться для объединения сокращенных свойств, сжатия цветов и веса шрифта. Аналогичным инструментом для сжатия кода CSS для более быстрой загрузки является CSS Drive.

Несколько советов

Ниже приведены несколько советов и приемов, которые следует учитывать при написании кода CSS для шаблона вашего блога:

1. Всегда используйте внешние таблицы стилей, а не вставляйте весь код перед тегом.

2. Используйте универсальные классы, чтобы избежать повторений. Например: вы можете использовать простой класс div.floatleft {float: left;} для перемещения любого элемента влево вместо использования одного и того же атрибута в нескольких классах.

3. Используйте файлы CSS, специфичные для браузера, для исправления ошибок. Это означает, что если вы обнаружили ошибку, которая возникает только в определенном браузере (обычно в Internet Explorer 6 или более ранних версиях), используйте отдельную таблицу стилей для исправления этой ошибки. Благодаря этому ваша основная таблица стилей будет аккуратной и чистой.

Для блоггеров WordPress: помимо оптимизации кода CSS, вы должны узнать , как уменьшить время загрузки страницы блога и как следует очистить базу данных WordPress а>.

Вы уже оптимизировали CSS своего шаблона блога? Какие ваши любимые инструменты для оптимизации кода CSS? Делитесь своими идеями в комментариях.