La manera més fàcil de reduir el vostre CSS de Shopify que s'ha creat amb variables líquides

Minify Script per a fitxers CSS líquids de Shopify

Vam construir un Shopify Plus lloc per a un client que té una sèrie de configuracions per als seus estils al fitxer del tema real. Tot i que això és realment avantatjós per ajustar els estils fàcilment, vol dir que no teniu fulls d'estil en cascada estàtic (CSS) que podeu fer fàcilment minifiqueu (redueix la mida). De vegades es coneix com a CSS compressió comprimir el teu CSS.

Què és la minimització de CSS?

Quan escriviu en un full d'estil, definiu l'estil d'un element HTML concret una vegada i, a continuació, l'utilitzeu una i altra vegada en qualsevol nombre de pàgines web. Per exemple, si volia configurar alguns detalls sobre com es veien els meus tipus de lletra al meu lloc, podria organitzar el meu CSS de la següent manera:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Dins d'aquest full d'estil, cada espai, retorn de línia i pestanya ocupen espai. Si els elimino tots, puc reduir la mida d'aquest full d'estil en més d'un 40% si es redueix el CSS! El resultat és aquest...

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

Minificació CSS és imprescindible si voleu accelerar el vostre lloc i hi ha diverses eines en línia que us poden ajudar a comprimir el vostre fitxer CSS de manera eficient. Només busca comprimir l'eina CSS or minify eina CSS en línia.

Imagineu un fitxer CSS gran i la quantitat d'espai que es pot estalviar reduint el seu CSS... normalment és un mínim del 20% i pot arribar al 40% del seu pressupost. Tenir una pàgina CSS més petita referida al vostre lloc pot estalviar temps de càrrega a cada pàgina, augmentar la classificació del vostre lloc, millorar la vostra implicació i, en definitiva, millorar les vostres mètriques de conversió.

L'inconvenient, per descomptat, és que hi ha una sola línia en un fitxer CSS comprimit, de manera que són increïblement difícils de resoldre o actualitzar-los.

Shopify CSS Liquid

Dins d'un tema de Shopify, podeu aplicar configuracions que podeu actualitzar fàcilment. Ens agrada fer-ho mentre provem i optimitzem els llocs de manera que només puguem personalitzar el tema visualment en lloc d'aprofundir en el codi. Per tant, el nostre full d'estils està construït amb Liquid (llenguatge de script de Shopify) i afegim variables per actualitzar el full d'estils. Pot semblar així:

{%- 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 }}
}

Tot i que això funciona bé, no podeu simplement copiar el codi i utilitzar una eina en línia per reduir-lo perquè el seu script no entén les etiquetes líquides. De fet, destruiràs totalment el teu CSS si ho intentes! La gran notícia és que, com que està construït amb Liquid, podeu UTILITZAR scripts per minimitzar la sortida!

Minificació CSS ​​de Shopify en líquid

Shopify us permet escriure variables i modificar fàcilment la sortida. En aquest cas, podem embolicar el nostre CSS en una variable de contingut i després manipular-lo per eliminar totes les pestanyes, retorns de línia i espais! He trobat aquest codi al Comunitat Shopify de Tim (tairli) i va funcionar genial!

{%- 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  }}

Així, per al meu exemple anterior, la meva pàgina theme.css.liquid es veuria així:

{%- 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  }}

Quan executo el codi, el CSS de sortida és el següent, perfectament minificat:

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