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 цветни стойности в шестнадесетичен, като по този начин намалявате режийните разходи и увеличавате ефективността.
  • премахнете всички коментари и бели полета.
  • оптимизирайте граничните стойности на съвременните показатели. Например: границата на атрибута: 2px 5px 2px 5px се променя на границата: 2px 5px ;.
  • превръщайте абсолютните стойности в относителни. Например: атрибутът font-size: 18px; може да се промени в размер на шрифта: 2em;
  • конвертира множество фон, шрифт, марж, подложка, атрибути на списъци в един атрибут.

Почистете CSS файла и намалете размера

Сега е време да почистите вашия CSS код за грешки и да намалите размера на файла. Намаляването на размера на CSS е важно, тъй като влияе върху времето за зареждане на страниците на вашия блог. Отидете на Clean 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 кода? Споделяйте идеите си в секцията за коментари.