Лайфхак: кастомизация стилей для временных изменений шаблона
Бывают случаи, когда требуется по-быстрому переопределить стили шаблона сайта:
- создается копия сайта, и CSS копируется из оригинального проекта, чтобы его «допилить»,
- нужна временная правка стилей, например, новогодние изменения (правильно - использовать версионирование через git)
В этих случаях есть смысл вносить изменения не в исходный текст CSS, а переопределить свойства в отдельном файле. Удобно для этого использовать CSS-препроцессоры.
Простая техника как это сделать:
- Скопировать исходный файл
site-styles.less
(или сделать симлинк) в новый проект. - В
bundle-site-styless.less
подключить исходный файлsite-styles.less
и добавитьstyles-legacy.less
. - В
styles-legacy.less
определить специфику проекта.
Таким образом, меняя вид сайта-донора CSS, можем сделать легкий «апдейт» нового проекта с минимальными правками.
Минусы: увеличение результирующего CSS файла при значительном переопределении стилей. Однако если использовать структурную оптимизацию, то «перезаписанные» стили будут удалены, и мы не получим накладных расходов в виде бесполезного увеличения размера файла.