Najjednoduchší spôsob, ako minimalizovať svoj štýl Shopify CSS, ktorý je vytvorený pomocou tekutých premenných

Minifikačný skript pre súbory Shopify Liquid CSS

Vybudovali sme a ShopifyPlus stránky pre klienta, ktorý má množstvo nastavení pre svoje štýly v aktuálnom súbore témy. Aj keď je to skutočne výhodné na jednoduché prispôsobenie štýlov, znamená to, že nemáte statické kaskádové štýly (CSS) súbor, ktorý môžete ľahko minify (zmenšiť veľkosť). Niekedy sa to označuje ako CSS kompresie a stlačujúce váš CSS.

Čo je miniifikácia CSS?

Keď píšete do šablóny so štýlmi, raz definujete štýl pre konkrétny prvok HTML a potom ho znova a znova používate na ľubovoľnom počte webových stránok. Napríklad, ak by som chcel nastaviť nejaké špecifiká pre to, ako moje písma vyzerali na mojej stránke, mohol by som svoj CSS usporiadať takto:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

V tejto šablóne so štýlmi zaberá miesto každá medzera, návrat riadka a karta. Ak odstránim všetky, môžem zmenšiť veľkosť tejto šablóny so štýlmi o viac ako 40%, ak je CSS minimalizované! Výsledkom je toto…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

Minifikácia CSS je nutnosťou, ak chcete zrýchliť svoje stránky a existuje množstvo nástrojov online, ktoré vám môžu pomôcť efektívne komprimovať váš súbor CSS. Stačí hľadať komprimovať nástroj CSS or nástroj minifikácie CSS on-line.

Predstavte si veľký súbor CSS a koľko miesta sa dá ušetriť minifikáciou jeho CSS... zvyčajne je to minimálne 20 % a môže to byť až 40 % ich rozpočtu. Menšia stránka CSS odkazovaná na váš web môže ušetriť čas načítania na každej jednej stránke, môže zvýšiť hodnotenie vašej lokality, zlepšiť vašu interakciu a v konečnom dôsledku zlepšiť metriky konverzií.

Nevýhodou je, samozrejme, to, že v komprimovanom súbore CSS je jeden riadok, takže je neuveriteľne ťažké ich vyriešiť alebo aktualizovať.

Shopify CSS Liquid

V rámci témy Shopify môžete použiť nastavenia, ktoré môžete jednoducho aktualizovať. Radi to robíme, keď testujeme a optimalizujeme stránky, aby sme si mohli tému prispôsobiť len vizuálne a nemuseli sa hrabať v kóde. Takže naša šablóna so štýlmi je vytvorená pomocou Liquid (skriptovací jazyk Shopify) a pridávame premenné na aktualizáciu šablóny so štýlmi. Môže to vyzerať takto:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

Aj keď to funguje dobre, nemôžete jednoducho skopírovať kód a použiť online nástroj na jeho minifikáciu, pretože ich skript nerozumie tekutým značkám. V skutočnosti, ak sa o to pokúsite, úplne zničíte svoje CSS! Skvelá správa je, že pretože je to postavené s Liquid... môžete skutočne POUŽÍVAŤ skriptovanie na minimalizáciu výstupu!

Minifikácia Shopify CSS v tekutom stave

Shopify vám umožňuje jednoducho skriptovať premenné a upravovať výstup. V tomto prípade môžeme skutočne zabaliť naše CSS do premennej obsahu a potom s ňou manipulovať, aby sme odstránili všetky tabulátory, návraty riadkov a medzery! Tento kód som našiel v Komunita Shopify z Tim (tairli) a fungovalo to bravúrne!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Takže v mojom príklade vyššie by moja stránka theme.css.liquid vyzerala takto:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Keď spustím kód, výstupný CSS je nasledujúci, dokonale minimalizovaný:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}