Руководство по комментариям CSS

Добавление комментариев в код CSS очень важно, чтобы его можно было легко понять через определенный момент времени. Это также облегчает жизнь тем, кто пытается читать и изменять CSS в соответствии со своими потребностями.

Формат комментария CSS

CSS поддерживает комментарии только в следующем формате:

/ * Вот комментарий * /

Комментарий должен иметь начальную и конечную декларацию до и после текста комментария. Это может быть одна строка или несколько строк.

Пример однострочного комментария

Однострочные комментарии обычно используются для объяснения истории изменений или исходного кода, как показано ниже:

#header h1 {
font-size: 44px;
float: left;
margin: 0;
}
#header h1 {
font-size: 28px; /* Original size: 44px; */
float: left;
margin: 5px; /* Original: 0; */
}

Здесь измененные определения стилей отмечены в комментариях. Это хорошая практика, особенно когда вы играете с основным CSS своей темы на живом сайте. Если вы сделаете ошибку, у вас всегда будет исходный код для возврата.

Пример многострочных комментариев

Это наиболее распространенный стиль комментирования в CSS, используемый для объяснения кода или важной информации об использовании. Ниже приведен практический пример многострочных комментариев из файла CSS темы WordPress, показывающий детали темы и таблицу содержимого файла CSS.

/*
Theme Name: Twenty Fifteen
Description: Used to style the TinyMCE editor.
*/

/**
* Table of Contents:
*
* 1.0 - Body
* 2.0 - Typography
* 3.0 - Elements
* 4.0 - Alignment
* 5.0 - Caption
* 6.0 - Galleries
* 7.0 - Audio / Video
* 8.0 - RTL
*/

Использование // для однострочного комментария в CSS

CSS не поддерживает однострочный комментарий, и комментарий должен иметь открывающее и закрывающее объявление. Но некоторые люди по-прежнему используют //, чтобы пометить конкретную строку как недопустимую. Например, в приведенном ниже коде font-size не будет действовать, поскольку // в начале делает это объявление недействительным.

.title {
//font-size: 28x;
margin: 5px;
}

Но это делается для того, чтобы сделать строку недействительной, что также можно сделать, добавив перед строкой любые ненужные символы. Например:

.title {
ZZZfont-size: 28x;
margin: 5px;
}

Хотя это будет работать для одной строки, его нельзя рассматривать как настоящий однострочный комментарий. Более того, использование // будет иметь разные эффекты в зависимости от места. Например, в приведенном ниже случае // закомментирует весь блок.

// This is invalid single line comment
.title {
font-size: 28x;
margin: 5px;
}
/* This will make the entire block declaration .title as invalid */

Указывает на размышление

Комментарии помогают объяснить код и улучшить читаемость.

Комментарии игнорируются синтаксическим анализатором CSS и веб-браузерами и не отображаются на странице, отображаемой для пользователей.

Комментарии могут состоять из одной или нескольких строк.

Вложенные комментарии не поддерживаются в CSS.

Комментарии также могут содержать информацию об авторских правах и авторе.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *