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 code

Download the example 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}

Lessons

Minification of CSS to reduce its volume

PRO subscription for working with the service