Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Комментарии — составляющая часть кода на любом языке программирования. Есть возможность комментирования и в CSS.
Если вы работаете в команде и занимаетесь большим проектом, вам нужна возможность как-то пояснять свой код товарищам. Тут вам на помощь придут комментарии.
Таблицы стилей со временем могут стать очень сложными и объемными. Поэтому систематическое добавление комментариев должно стать общепринятой практикой в команде.
В этой статье мы рассмотрим, как добавлять встроенные и многострочные комментарии в CSS.
Как закомментировать CSS
Чтобы закомментировать часть CSS-кода, вам понадобится обычный слэш (/) и астериск (*).
Для добавления как встроенного, так и многострочного комментария в CSS вы начинаете со слэша и астериска (/*). Их же, но в обратном порядке (*/) вы ставите в конце комментария.
Вот как выглядит встроенный (строчный) комментарий в CSS:
/* This is an inline comment in CSS */
А так выглядит многострочный комментарий:
/* This is a multi-line comment in CSS */
Вы также можете закомментировать те строки CSS, которые не должны выполняться:
/* .email-sub { padding: 0.2rem; border: 1px solid var(--primary-color); border-radius: 4px; } .email-sub:focus { border: 1px solid var(--secondary-color); outline: none; } */
С помощью комментариев обозначают начало и конец стилей отдельных разделов на веб-странице:
/* Hero section starts */ .hero { display: flex; align-items: center; justify-content: space-between; gap: 1.9rem; max-width: 1100px; margin: 2rem auto -6rem; } /* Hero section ends */
Комментарии помогут вам и тогда, когда вы хотите оставить примечание в вашем CSS для разработчиков, которые будут работать с вашим кодом после вас:
/* Don't override this style if you don't know what you are doing. Otherwise, CSS might give you a kick in the butt */
Организация CSS при помощи комментариев
Примечание редакции Techrocks: этот раздел взят из другой статьи — «CSS Comment Example – How To Comment Out CSS».
В более крупных проектах CSS-файлы могут быстро разрастись. В результате их может стать трудно поддерживать. Упорядочивание СSS и разделение кода на отдельные части поможет лучше ориентироваться в стилях в будущем. При этом стоит также создать «Содержание» документа:
/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/
Заключение
В долгосрочной перспективе комментарии в СSS могут помочь вспомнить, что вы делали, когда писали тот или иной код.
Кроме того, если добавлять комментарии правильно, это облегчает работу над проектом, к которому вы возвращаетесь после долгого перерыва.
Перевод статьи «CSS Comments – How to Comment out CSS».
Запись Как закомментировать CSS (и как писать комментарии) впервые появилась Techrocks.