Lessons

Minification of CSS to reduce its volume

During minification, the file is modified as follows:

  • Extra characters are removed: spaces, line breaks, semicolons, etc . - The names of functions and variables are replaced with shorter ones where possible.
  • Logical expressions are simplified so that the functionality remains the same.
  • and other optimizations.

All these operations fully preserve the functionality of the code and allow you to reduce the size of files. This is necessary to speed up the download of the file and, therefore, the page.

How to minify files.

Example of minified and regular CSS code:

/*Стандартный читаемый CSS код*/
kbd {
    padding: 0.1875rem 0.375rem;
    font-size: 0.875em;
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    border-radius: 0.25rem;
}
kbd kbd {
    padding: 0;
    font-size: 1em;
}
figure {
    margin: 0 0 1rem;
}
img, svg {
    vertical-align: middle;
}
table {
    caption-side: bottom;
    border-collapse: collapse;
}
caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--bs-secondary-color);
    text-align: left;
}
th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

/*Идентичный по функциональности, но минифицированный CSS код*/
kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}

Tariff plans for working with the service

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree