4 Tools voor het controleren en optimaliseren van CSS

Zodra uw website begint te groeien, zal uw code dat ook doen. Naarmate uw code groter wordt, kan CSS ineens moeilijk te onderhouden zijn en overschrijft u de ene CSS-regel met de andere. Dit compliceert dingen en je zult waarschijnlijk eindigen met veel bugs.

Als dit je overkomt, is het tijd voor jou om dit te doen controleer de CSS van uw site. Als u uw CSS controleert, kunt u delen van uw CSS identificeren die niet zijn geoptimaliseerd. U kunt ook de bestandsgrootte van de stylesheet verminderen door regels code te verwijderen die de prestaties van uw site vertragen.

Hier zijn 5 goede hulpmiddelen om u te helpen bij het controleren en optimaliseren van CSS.

Type-o-matic

Type-o-matic is een Firebug-plug-in om lettertypen te analyseren die in een website worden gebruikt. Deze plug-in geeft een visueel rapport in een tabel met font-eigenschappen zoals de lettertypefamilie, de grootte, het gewicht, de kleur en ook het aantal keren dat het lettertype op de webpagina wordt gebruikt. Via de rapporttabel kunt u eenvoudig het gebruik van het lettertype optimaliseren, verwijderen wat onnodig is of stijlen combineren die veel op elkaar lijken.

CSS Lint

CSS Lint is een pluizende tool die de CSS-syntaxis analyseert op basis van specifieke parameters die betrekking hebben op prestaties, toegankelijkheid en compatibiliteit van uw CSS. Je zou verrast zijn door de resultaten, verwacht veel waarschuwingen in je CSS. Deze fouten zullen u uiteindelijk helpen om de CSS-syntaxis te corrigeren en efficiënter te maken. Bovendien zul je ook een betere CSS-schrijver zijn.

CSS ColorGuard

CSS ColorGuard is een relatief nieuwe tool. Het is gebouwd als een knooppuntmodule en het loopt over alle platforms: Windows, OS X en Linux. CSS ColorGuard is een opdrachtregelprogramma dat u op de hoogte brengt als u vergelijkbare kleuren in uw stylesheet gebruikt; bv. # f3f3f3 is redelijk dichtbij # f4f4f4, dus misschien wil je overwegen om de twee samen te voegen. CSS ColorGuard is configureerbaar, u kunt de gelijkheidsdrempel instellen en de kleuren instellen die het gereedschap moet negeren.

CSS Dig

CSS Dig is een Python-script en werkt lokaal op uw computer. CSS Dig zal een grondig onderzoek uitvoeren in uw CSS. Het zal eigenschappen lezen en combineren, bijvoorbeeld alle achtergrondkleurverklaringen gaan onder de achtergrondsectie. Op die manier kunt u gemakkelijk beslissingen nemen op basis van het rapport bij het standaardiseren van uw CSS-syntaxis, bijvoorbeeld u kunt kleuren vinden in verschillende stijlen met de volgende kleurdeclaratie.

 kleur: #ccc; kleur: #cccccc; kleur: #CCC; kleur: #CCCCCC; 

Deze kleurverklaringen doen hetzelfde. Je kunt net zo goed gaan met de #ccc of met de hoofdstad #CCC als de standaard. CSS Dig kan deze redundantie ook voor andere CSS-eigenschappen blootleggen, en je zult in staat zijn om je code consistenter te maken.