Коротко: «формат CSS» может означать три разные вещи. 1) Формат файла — обычный текстовый файл с расширением .css. 2) Формат записи кода — с отступами (expanded) или сжатый в одну строку (minified). 3) Исходный формат — препроцессоры SCSS/Sass/LESS, которые «компилируются» в CSS. Разберём все смыслы.
Три значения «формата»
| Смысл | Что это | Пример |
|---|---|---|
| Формат файла | текстовый файл .css |
style.css |
| Формат записи | отступы или сжатие | expanded / minified |
| Исходный формат | препроцессор | SCSS, LESS |
Вкладки: разбираем по смыслу
CSS-файл — обычный текст в кодировке UTF-8 с расширением .css. Внутри — правила: селектор и фигурные скобки со свойствами.
.card {
padding: 16px;
border-radius: 8px;
}Файл подключают тегом <link> или в WordPress через wp_enqueue_style.
«Читаемый» формат: отступы, переносы строк, комментарии. Так CSS пишут и правят.
/* Кнопка */
.btn {
background: #003F8F;
color: #fff;
}Для автоматического форматирования используют Prettier: сохранение — и код выровнен.
«Сжатый» формат: без пробелов и переносов — файл весит меньше и быстрее загружается.
.btn{background:#003F8F;color:#fff}Минификацию делают сборщики (gulp, postcss) или онлайн-сервисы. Держите исходник — сжатый код неудобно править.
Препроцессоры — «надстройка» над CSS: переменные, вложенность, примеси. Их код компилируется в обычный CSS.
// SCSS
$brand: #003F8F;
.card {
.btn { background: $brand; }
}В браузере работает лишь итоговый CSS. Сегодня часть возможностей (переменные, вложенность) уже есть в чистом CSS.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Файл «не работает» | неверное расширение | проверить .css |
| Кракозябры | кодировка не UTF-8 | сохранить в UTF-8 |
| После сжатия стиль сломался | битая минификация | собирать из исходника |
| SCSS не применяется | не скомпилирован | подключить собранный CSS |
Проверьте себя
Вопросы и ответы
Не обязательно: CSS уже умеет переменные и вложенность. Препроцессоры полезны в крупных проектах с переиспользуемыми блоками и функциями.
Скорее всего ошибка в минификаторе или в исходном коде (незакрытая скобка). Проверяйте исходник и используйте проверенные сборщики.
Нет, отступы не меняют действие стилей — только читаемость и вес файла.
На продакшене — минимизированный, в разработке — читаемый. Обычно сборка делает это автоматически.
Итоги
- CSS-файл — текстовый файл
.cssв UTF-8. - Формат записи: с отступами (читаемый) или сжатый (минимизированный).
- Препроцессоры (SCSS/LESS) компилируются в обычный CSS.
- Отступы не влияют на результат, только на читаемость и вес.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.