Самы просты спосаб мінімізаваць ваш Shopify CSS, створаны з дапамогай вадкіх зменных

Мінімізаваць скрыпт для файлаў Shopify Liquid CSS

Мы пабудавалі а Shopify Plus сайт для кліента, які мае шэраг налад для сваіх стыляў у рэальным файле тэмы. Хоць гэта сапраўды выгадна для лёгкай налады стыляў, гэта азначае, што ў вас няма статычных каскадных табліц стыляў (CSS) файл, які вы можаце лёгка перамяншаць (памяншаць у памеры). Часам гэта называюць CSS сціск і сціск ваш CSS.

Што такое мініфікацыя CSS?

Калі вы пішаце ў табліцу стыляў, вы вызначаеце стыль для пэўнага элемента HTML адзін раз, а затым выкарыстоўваеце яго зноў і зноў на любой колькасці вэб-старонак. Напрыклад, калі б я хацеў наладзіць некаторыя асаблівасці таго, як мае шрыфты выглядалі на маім сайце, я мог бы арганізаваць свой CSS наступным чынам:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

У гэтай табліцы стыляў кожны прабел, вяртанне радка і ўкладка займаюць месца. Калі я выдалю ўсё гэта, я магу паменшыць памер гэтай табліцы стыляў больш чым на 40%, калі мінімізаваць CSS! Вынік такі…

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

Мініфікацыя CSS з'яўляецца абавязковым, калі вы хочаце паскорыць свой сайт, і ёсць шэраг інструментаў у Інтэрнэце, якія могуць дапамагчы вам эфектыўна сціснуць ваш файл CSS. Проста шукайце сціснуць інструмент CSS or мінімізаваць інструмент CSS Інтэрнэт.

Уявіце сабе вялікі файл CSS і колькі месца можна зэканоміць, мінімізуючы яго CSS... звычайна гэта мінімум 20% і можа складаць больш за 40% іх бюджэту. Наяўнасць меншай старонкі CSS, якая спасылаецца на ўсім вашым сайце, можа зэканоміць час загрузкі кожнай асобнай старонкі, можа павысіць рэйтынг вашага сайта, палепшыць вашу ўзаемадзеянне і ў канчатковым рахунку палепшыць паказчыкі канверсіі.

Недахопам, вядома, з'яўляецца тое, што ў сціснутым файле CSS ёсць адзін радок, таму іх неверагодна цяжка ліквідаваць або абнавіць.

Shopify CSS Liquid

У тэме Shopify вы можаце прымяніць налады, якія вы можаце лёгка абнавіць. Нам падабаецца рабіць гэта, калі мы тэстуем і аптымізуем сайты, каб мы маглі проста наладзіць тэму візуальна, а не капацца ў кодзе. Такім чынам, наша табліца стыляў пабудавана з Liquid (мова сцэнарыяў Shopify), і мы дадаем зменныя для абнаўлення табліцы стыляў. Гэта можа выглядаць так:

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

Нягледзячы на ​​тое, што гэта добра працуе, вы не можаце проста скапіяваць код і выкарыстоўваць онлайн-інструмент для яго мінімізацыі, таму што іх сцэнар не разумее вадкіх тэгаў. На самай справе, вы цалкам знішчыце свой CSS, калі паспрабуеце! Выдатная навіна заключаецца ў тым, што, паколькі ён пабудаваны з Liquid, вы можаце выкарыстоўваць сцэнары для мінімізацыі вываду!

Мініфікацыя Shopify CSS у вадкасці

Shopify дазваляе лёгка ствараць сцэнары зменных і змяняць вынік. У гэтым выпадку мы можам на самай справе абгарнуць наш CSS у зменную кантэнту, а затым маніпуляваць ёю, каб выдаліць усе ўкладкі, вяртанні радкоў і прабелы! Я знайшоў гэты код у Супольнасць Shopify ад Цім (Тэйрлі) і гэта спрацавала бліскуча!

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

Такім чынам, у маім прыкладзе вышэй мая старонка theme.css.liquid будзе выглядаць так:

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

Калі я запускаю код, выхадны CSS выглядае наступным чынам, ідэальна мінімізаваны:

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