Как закомментировать CSS (и как писать комментарии)

0
100
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал 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».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here