Комментарии — составляющая часть кода на любом языке программирования. Есть возможность комментирования и в 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».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
