Чистый СSS код

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Это 6-я статья руководства CSS для начинающих; здесь обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.

Информация: Чистый код CSS

Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.

Пустое пространство

Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.

В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.

Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.

Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.

Примеры

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

.carrot {color: orange; text-decoration: underline; font-style: italic;}

Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

Некоторые используют отступы — 2 или 4 пробела или табы:

.carrot { 
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

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

.vegetable         { color: green; min-height:  5px; min-width:  5px }
.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

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

Комментарии

Комментарии в CSS имеют следующий вид: /* комментарий */.

Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.

Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.

Пример
/* стиль для начальной буквой C в первом пункте*/
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Группировка селекторов

Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.

В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.

Пример

Это правило делает элементы <h1>, <h2>, и <h3> одного цвета.

Удобно определить цвет только в одном месте, в случае, если возможны изменения.

/* цвет для заголовков */
h1, h2, h3 {color: navy;}

Действуем: добавление комментариев и улучшения формата

  1. Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке):
    strong {color: red;}
    .carrot {color: orange;}
    .spinach {color: green;}
    #first {font-style: italic;}
    p {color: blue;}
    
  2. Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.
  3. Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей:
    Cascading Style Sheets
    Cascading Style Sheets
Задание

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

Cascading Style Sheets
Cascading Style Sheets

(Существует более чем один способ сделать это).

Possible solution
One way to do this is to put comment delimiters around the rule for .carrot:
/*.carrot {
  color: orange;
}*/
Hide solution
Посмотреть решение задания.

Что дальше?

Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы указать внешний вид текста в вашем документе.

Метки документа и участники

 Внесли вклад в эту страницу: Svart, F-302, Crystal
 Обновлялась последний раз: Svart,