CSS staat voor cascading stylesheets, wat een belangrijk aspect is van hedendaagse webontwerpen. Als u een webdesigner bent en weet hoe u WordPress-thema's of bloggersjablonen moet ontwerpen, kunt u CSS niet meer negeren. Als u echter een blog hebt en de CSS-bestanden wilt optimaliseren voor betere prestaties en sneller laden, zijn hier alle hulpprogramma's die u nodig hebt.

Hoe het CSS-bestand van uw blogsjabloon te vinden

Als uw blog op WordPress staat, wordt het CSS-bestand idealiter in de themamap geplaatst onder wp-content / themes / yourtheme . Om de exacte locatie te weten, open je je blog en controleer je de paginabron. U vindt een link naar de CSS van uw thema zoals hieronder getoond

Als je blog op Blogger staat, open je het Blogger-dashboard en ga je naar het tabblad 'Indeling'. Selecteer "HTML bewerken" en het selectievakje "widget-sjablonen uitbreiden". Kopieer vervolgens de CSS-code in een Kladblok-bestand dat net na de body-tag opening is gedefinieerd.

Download een kopie van dat bestand en voer de wijzigingen uit die in deze zelfstudie worden beschreven. Het zou beter zijn als u een back-up van het stylesheet maakt voor als er iets misgaat, kunt u het ontwerp van uw site herstellen met behulp van de back-up.

Optimaliseer de CSS-code

Formatteer je CSS-code

De eerste stap naar optimalisatie van elke CSS-code is de juiste opmaak. U moet de stijlelementen en de kenmerken zorgvuldig opmaken, zodat ze gemakkelijk te begrijpen zijn. Bovendien moet de code zo worden geschreven dat deze niet overlapt met andere klassen of ID's. Het handmatig formatteren van de code is een zware klus en u kunt de tool CSS opmaken gebruiken om aan de slag te gaan.

Kopieer de stijlpagina die u wilt opmaken en plak deze in het tekstvak. Selecteer vervolgens de gewenste regels voor opmaak in het rechterpaneel.

Bijvoorbeeld: u wilt mogelijk een nieuwe regel invoegen na de CSS-eigenschap van elke div-tag. Misschien wilt u ook alle witruimten verwijderen die na een puntkomma zijn geplaatst. Stel alle regels in die door het programma moeten worden uitgevoerd en klik vervolgens op de knop "CSS opmaken". Alle gespecificeerde regels zouden worden toegepast en de code zal worden opgemaakt zoals hieronder getoond:

Optimaliseer CSS om overtolligheden te verwijderen

Nu je je code hebt geformatteerd voor leesbaarheid, is het tijd voor wat optimalisatie. Ga naar Online CSS optimizer en plak de volledige code in het daarvoor bestemde tekstvak. U kunt ook de URL van uw CSS-bestand invoeren, als u dat wilt.

Deze tool kan worden gebruikt voor de volgende doeleinden:

  • converteer alle RGB-kleurwaarden naar hexadecimaal, waardoor de overheadkosten worden verlaagd en de efficiëntie wordt verhoogd.
  • verwijder alle opmerkingen en spaties.
  • optimaliseer de grenswaarden naar moderne statistieken. Bijvoorbeeld: de attribuutrand: 2px 5px 2px 5px wordt gewijzigd in rand: 2px 5px ;.
  • converteer absolute waarden in relatieve waarden. Bijvoorbeeld: het kenmerk font-size: 18px; kan worden gewijzigd in lettergrootte: 2em;
  • converteert meerdere achtergrond, lettertype, marge, opvulling, lijstattributen in één attribuut.

Maak je CSS-bestand schoon en verklein de grootte

Nu is het tijd om uw CSS-code op fouten te verwijderen en de bestandsgrootte te verkleinen. Het verkleinen van de CSS-grootte is belangrijk omdat dit de laadtijd van uw blogpagina's beïnvloedt. Ga naar CSS opschonen en plak de CSS-code die u in de vorige stap hebt geoptimaliseerd. Selecteer de compressiemodus als het hoogste en selecteer de onderstaande opties

Clean CSS is gebaseerd op CSS Tidy en kan worden gebruikt om kortere eigenschappen samen te voegen, kleuren en lettergewichten te comprimeren. Een vergelijkbaar hulpprogramma voor het comprimeren van CSS-code voor sneller laden, is CSS Drive.

Een aantal tips

Hieronder volgen enkele tips en trucs die u in gedachten moet houden bij het schrijven van de CSS-code voor de sjabloon van uw blog:

1. Gebruik altijd externe stylesheets in plaats van de volledige code vóór de tag te plakken.

2. Gebruik universele klassen om herhalingen te voorkomen. Bijvoorbeeld: u kunt een eenvoudige klasse div.floatleft {float: left;} gebruiken om elk element naar links te zweven in plaats van hetzelfde kenmerk in meerdere klassen te gebruiken.

3. Gebruik browserspecifieke CSS-bestanden om bugs te herstellen. Dat betekent dat, als je een fout ziet die alleen in een bepaalde browser voorkomt (meestal Internet Explorer 6 of oudere versies), gebruik dan een aparte stylesheet om die bug te repareren. Hierdoor blijft uw hoofdstijlvel netjes en schoon.

Voor WordPress-bloggers : behalve het optimaliseren van de CSS-code, moet u ook kijken hoe u de paginalaadtijd van een blog kunt verminderen en hoe u de WordPress-database moet opruimen.

Heb je de CSS van je blogsjabloon al geoptimaliseerd? Wat zijn je favoriete tools voor het optimaliseren van CSS-code? Deel uw ideeën in de commentarensectie.