Верстаю, часто нужно быстро протестировать как выглядит блок без какого то конкретного свойства. Удалять и потом писать заново неудобно.
Знаю что в DevTools можно чекбоксом отключить. Но как сделать это прямо в .css файле, чтобы оно было "отключено" но не удалено? Есть какой то стандартный способ или только комментарием оборачивать?
Комментарий - единственный стандартный способ в чистом CSS:
.block {
/* display: flex; */
color: red;
}Все нормальные редакторы делают это по Ctrl+/ (или Cmd+/ на Mac). Выделяешь строку или несколько строк - жмешь шорткат - готово. Снять комментарий тем же сочетанием.
Если используешь SCSS/SASS, можно вынести значение в переменную и просто менять ее, но для отладки это оверкилл. Комментарий через шорткат редактора - правильный путь.
Для отладки в браузере DevTools удобнее - там галочка рядом с каждым свойством. В файле же только комментарий, ничего другого CSS-парсер не поймет.
Есть еще один лайфхак для локальной отладки - задать свойству заведомо невалидное значение, например:
.block {
display: flex_DISABLED;
}Браузер проигнорирует невалидное значение и применит каскадное. Это грязно и в продакшене так делать нельзя, но для быстрой проверки иногда удобнее чем комментарий - видно что свойство "отключено" намеренно.
Хочу добавить: в VS Code есть расширение CSS Peek и встроенная подсветка закомментированного кода. Плюс если используешь Live Server или аналог - изменения в файле сразу видны в браузере без перезагрузки. Для итеративной отладки стилей это меняет процесс кардинально.
ну это уж совсем базовые вещи, надо было загуглить прежде чем спрашивать тут. comment out это первое что изучают
Ага, Ctrl+/ знал, но не подумал применять для этого. Спасибо.