Чистый СSS код

Перейти к предыдущему разделу:
SelectorsЭто 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;
}

.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 {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

/*.carrot {
  color: orange;
}*/

Что дальше?

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