3266765c50
* fixed russian translation for comments in css Translated the missing part of the article. Fixed markdown styles. Fixed typos. * fix: removed space between backticks and css
104 lines
5.2 KiB
Markdown
104 lines
5.2 KiB
Markdown
---
|
||
title: Comments in CSS
|
||
localeTitle: Комментарии в CSS
|
||
---
|
||
## Комментарии в CSS
|
||
|
||
Комментарии используются в CSS для объяснения блока кода или для внесения временных изменений во время разработки. Прокомментированный код не выполняется.
|
||
|
||
Синтаксис комментария в CSS работает как для одиночных, так и для многострочных комментариев. Вы можете добавить столько комментариев в таблицу стилей, сколько захотите.
|
||
|
||
```css
|
||
/*
|
||
Это
|
||
многострочный
|
||
комментарий
|
||
*/
|
||
|
||
/* Это комментарий для одной строки*/
|
||
.group:after {
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
```
|
||
|
||
Используя комментарии CSS, чтобы сделать ваши таблицы стилей более читабельными, CSS будет легче поддерживать в будущем для вас или другого разработчика. Хорошая практика - использовать комментарии CSS, чтобы помочь идентифицировать части любой таблицы стилей, которые могут быть трудно понять для тех, кто не писал код.
|
||
|
||
Вы также можете сделать свои комментарии более понятными, стилизуя его.
|
||
|
||
```css
|
||
/*
|
||
***
|
||
* SECTION FOR H2 STYLE
|
||
***
|
||
* A paragraph where I give informations
|
||
* about everything that someone who reads the code
|
||
* but didn't write it would need to know.
|
||
* The asterisk around the paragraph make it more readable.
|
||
***
|
||
*/
|
||
```
|
||
Вы можете добавлять любое количество коментариев в вашу таблицу стилей. Общепринято использовать css комментарии для указания на те части вашей таблицы стилей, которые могут быть непонятны на первый взгляд. Комментарии особенно важны в командной работе, когда ваш код должен быть понятен в том числе и для остальных членов команды. При использовании комментариев вы делаете ваши таблицы стилей более читаемыми, и, как следствие, более поддерживаемыми в будущем.
|
||
|
||
## Форматы комментариев
|
||
|
||
Необходимо использовать комментарии постоянно, чтобы ваш код оставался в поддерживаемом состоянии и в нем могли легко разобраться другие разработчики.
|
||
Вот некоторые примеры того, какие комментарии вы можете использовать для облегчения разработки в будущем.
|
||
```css
|
||
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||
CSS Содержание
|
||
|
||
1.0 - Сброс стилей
|
||
2.0 - Шрифты
|
||
3.0 - Глобальные стили
|
||
4.0 - Цветовая палитра
|
||
5.0 - Заголовок
|
||
6.0 - Тело
|
||
6.1 - Слайдеры
|
||
6.2 - Изображения
|
||
7.0 - Футер
|
||
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
|
||
|
||
/****************************************************************************
|
||
1.0 - Сброс стилей */
|
||
|
||
/****************************************************************************
|
||
2.0 - Шрифты */
|
||
|
||
/****************************************************************************
|
||
3.0 - Глобальные стили */
|
||
|
||
/****************************************************************************
|
||
4.0 - Цветовая палитра */
|
||
|
||
/****************************************************************************
|
||
5.0 - Заголовок */
|
||
|
||
/****************************************************************************
|
||
6.0 - Тело */
|
||
|
||
/************************************************************************
|
||
5.1 - Слайдеры */
|
||
|
||
/************************************************************************
|
||
5.2 - Изображения */
|
||
|
||
/****************************************************************************
|
||
7.0 - Футер */
|
||
|
||
h2 {
|
||
font-size: 1.2em;
|
||
font-family: "Ubuntu", serif;
|
||
text-transform: uppercase;
|
||
}
|
||
```
|
||
|
||
### Дополнительная информация:
|
||
|
||
* [Документация MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments)
|
||
* [Комментарии CSS от Адама Робертса](https://www.sitepoint.com/css-comments/)
|
||
* [Советы по CSS](https://cssguidelin.es/#commenting)
|