Как писать комментарии в CSS: синтаксис и лучшие практики
Беспорядок в стилях тормозит работу команды: сложно ориентироваться в длинных файлах, правки ломают секции, а неопределённые пометки мешают поддержке. В тексте обсуждаем синтаксис однострочных и многострочных комментариев, разделение на секции, шаблоны имён секций и приёмы оформления для читаемости кода командой.
Вы получите набор правил и готовых шаблонов комментариев для CSS, пригодных для командной работы. В результате легко выделите секции в файле и сократите время на разбор чужого кода.
Как добавить CSS комментарий
Добавить CSS комментарий легко: просто заключите свой комментарий между открывающимся и закрывающимся тегом:
• Начните свой комментарий, добавив /*
• Закройте комментарий, добавив */Он может быть однострочным или многострочным.
Однострочный комментарий CSS:
div#border_red {
border: thin solid red;
} /* красная граница пример */
И многострочный пример:
/***************************
****************************
Многострочный комментарий
****************************
***************************/Разделение на секции
Часто я использую CSS комментарии в коде для структуризации стилей. Чтобы сделать это, я добавляю комментарии с большим количеством дефисов. Они формируют более очевидные разрывы на странице. Вот пример:
/*----------------------- Заголовок начинается здесь ------------------------------ */«Комментирование» кода в CSS
Комментирующие теги также могут быть полезны в процессе написания CSS, так как они позволяют "отключить" области кода, чтобы увидеть, что происходит.
Поскольку комментирующие теги сообщают браузеру о том, что нужно игнорировать все, что находится между ними. Благодаря этому их можно использовать для временного отключения некоторых частей кода CSS.
Советы по CSS комментированию
- Комментарии могут занимать несколько строк;
- Комментарии могут включать в себя CSS элементы, которые не нужно отображать в браузере и удалять полностью. Это хороший способ отладки стилей сайта;
- Используйте комментарии, когда пишете сложный CSS, чтобы добавить разъяснения и сообщить разработчикам о нюансах, которые стоит знать;
- Комментарии в HTML CSS могут также включать в себя такую метаинформацию, как:
- Автор;
- дата создания;
- информация об авторских правах.
Эффективность
Комментарии, безусловно, полезны. Но имейте в виду, что чем больше комментариев вы добавляете в код, тем больше увеличивается его объем, а это влияет на скорость загрузки и производительность сайта.
Комментарии