5 nástrojů pro analýzu CSS na příkazovém řádku

Pro analýzu a tipy k následné optimalizaci kaskádových stylů existuje mnoho vizuálních nástrojů a online služeb, včetně pomůcek pro CSS zabudovaných přímo v prohlížečích. Dnes se ale podíváme na nástroje pro příkazový řádek.
reklama

Proč s CSS pracovat na příkazovém řádku? Je tu především možnost skriptování a zabudování takových kontrol nebo analýz do nějakého širšího postupu. Já velice rád používám pluginy pro Visual Studio Code a velmi často pracuji s PhpStormem, ale nástroje pro příkazový řádek stále vyhledávám. Jsou rychlé, šikovné a snadno je začlením do celého workflow.

Stylelint – kontrola CSS

Začneme zlehka. Stylelint pravděpodobně znáte jako plugin zabudovaný do svého oblíbeného IDE nebo CSS editoru. V základu samozřejmě funguje na příkazovém řádku. Nainstalujete jej pomocí npm, vytvoříte konfigurační soubor s jedním povinným nastavením a poté už jen nástroj spustíte nad jedním nebo více CSS soubory. Základní kroky jsou popsány v dokumentaci.

Pro rychlou kontrolu tedy v příkazovém řádku přejděte do složky se svým projektem a zadejte příkaz v následující podobě, který nalezené problémy zapíše do soubory chyby.txt.

npx stylelint "**/*.css" > chyby.txt

Ten projde aktuální a všechny podsložky, vyhledá v nich soubory s příponou .css a následně je zkontroluje. Doporučuji seznámit se s dokumentací a upravit výchozí konfigurační soubor tak, aby kontroloval skutečně jen ty problémy, které považujete za zásadní. Což třeba nemusí být kontrola mezer a nových řádků.

Stylelint

Wallace CLI – statistika CSS na zadané URL? Wallace

Hledání chyb je jedna věc, statistika zápisů ve stylesheetu věc druhá. Rychlý pohled na úspornost kódu, počty pravidel, selektorů, deklarací, hacků, z-indexů, nebo třeba velikostí písem, fontů a barev, vám nabídne nástroj Wallace CLI.

Instaluje se opět klasicky přes npm. Na domovské stránce najdete ukázky použití, kdy příkaz pro spuštění Wallace provedete oproti URL adrese celého webu, přímému zápisu CSS, nebo konkrétnímu souboru s CSS.

Wallace

Jsem občas překvapen, když pustím Wallace oproti starším webům, které jsem stavěl na nějakém úsporném CSS frameworku. Musím se pak vždy ptát, proč tam třeba je použito tolik barev. O velikostech písma ani nemluvě.

Csscss – která pravidla sdílí stejné deklarace?

Ze světa JavaScriptu na příkazovém řádku na chvíli odskočíme k Ruby. V tomto jazyku je napsána utilitka csscss. Je velmi jednoduchá a slouží jedinému – zobrazí vám která pravidla mají duplicitní deklarace.

Výborně se vám tedy hodí pro situace, kdy se chcete zamyslet nad čistotou svého kódu a jeho úsporností.

csscss

Líbí se mi, že pracuje také s Less a Sass. V parametrech příkazového řádku lze omezit minimální počet shod, které vám bude csscss reportovat a volal jej můžete proti lokálním i vzdáleným CSS souborům.

UnCSS – odeberte nepoužité CSS

Jestliže chcete nechat optimalizaci svého kódu na automatice, podívejte se na nástroj UnCSS. Podívá se na zadanou adresu, zkontroluje ji oproti použitému CSS a zobrazí výstup s očištěným kódem.

UnCSS ale používám spíše výjimečně, pro rychlou optimalizaci nějakých starých projektů.

Clean-cssc-cli – automatická optimalizace CSS

Tento nástroj je rozhraním pro příkazový řádek k optimalizátoru clean-css určenému pro svět Node.js. Základní použití je velice jednoduché, stačí zavolat nad názvem existujícího stylesheetu a doplnit k němu název souboru, do kterého se uloží optimalizovaná varianta.

Pozor, pokud z nějakého důvodu používáte v CSS příkaz @import, tak je ve výchozím stavu vyloučen.

Alternativou je starší UglifyCSS, který jsem rovněž používal na některých projektech. Clean-css-cli se ale zdá udržovanější.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer (Drupal 7) a Site Builder (Drupal 8 & 9) a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Novinka listopad 2020

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Co píší na Interval.cz
@maxiorel na Twitteru

Maxiorel na Twitteru