Перейти к основному содержимому

3.10. Знаки препинания

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Знаки препинания​

Кавычки и запятые​

Два важных вопроса, которые мучают начинающих программистов:

  1. Когда использовать кавычки двойные ("), одинарные ('), а когда апострофы (’)?
  2. Когда использовать точки (.), запятые (,) и точку с запятой (;)?

В CSS можно использовать оба типа кавычек в значениях, где они требуются (например, в url() или content):

background-image: url("image.jpg");
content: 'Chapter 1';

Разницы между ' и " нет , но важно соблюдать консистентность (согласованность).

Апострофы — не являются частью синтаксиса CSS, но могут встречаться в строках (например, в content).

Используйте один стиль во всем проекте для лучшей читаемости.

Точка (.) : используется для выбора классов:

.container { width: 100%; }

Запятая (,) : разделяет селекторы:

h1, h2, h3 { color: red; }

Точка с запятой (;) : обязательна после каждого свойства:

p {
  font-size: 16px;
  color: black;
}

Последнее свойство в блоке можно без точки с запятой, но лучше всегда ставить — так проще редактировать код.

Вендорные префиксы​

Некоторые экспериментальные или недавно стандартизированные функции CSS требуют использования вендорных префиксов — специальных приставок, указывающих на принадлежность к конкретному движку браузера. Например:

  • -webkit- — для браузеров на движке WebKit (Safari, старые версии Chrome);
  • -moz- — для Firefox;
  • -ms- — для Internet Explorer и Edge (Legacy);
  • -o- — для старых версий Opera.

Пример:

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

Современные инструменты сборки (например, Autoprefixer) автоматически добавляют такие префиксы при необходимости, исходя из целевых браузеров проекта.

Комментарии в CSS​

Комментарии в CSS заключаются между /* и */. Они игнорируются браузером и служат для пояснения кода разработчикам. Комментарии могут занимать одну строку или несколько строк.

Пример:

/* Заголовок первого уровня */
h1 {
  font-weight: bold;
}