1 files changed, 165 insertions, 0 deletions
diff --git a/files/ru/web/guide/css/getting_started/readable_css/index.html b/files/ru/web/guide/css/getting_started/readable_css/index.html
new file mode 100644
index 0000000000..1720f6261d
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/readable_css/index.html
@@ -0,0 +1,165 @@
+---
+title: Чистый СSS код
+slug: Web/Guide/CSS/Getting_started/Readable_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">Это 6-я статья руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS для начинающих</a>; здесь </span>обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.</p>
+
+<h2 class="clearLeft" id="Информация_Чистый_код_CSS">Информация: Чистый код CSS</h2>
+
+<p>Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.</p>
+
+<h3 id="Пустое_пространство">Пустое пространство</h3>
+
+<p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p>
+
+<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p>
+
+<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p>
+
+<p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Примеры</div>
+
+<p>Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>Некоторые используют отступы — 2 или 4 пробела или табы:</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>Некоторые люди используют смешанный пробелы для повышения читаемости.</p>
+
+<pre class="brush: css">.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 }
+</pre>
+</div>
+
+<p>Некоторые используют вкладки для компоновки элементов, а другие только пробелы.</p>
+
+<h3 id="Комментарии">Комментарии</h3>
+
+<p>Комментарии в CSS имеют следующий вид: <code>/*</code> комментарий <code>*/</code>.</p>
+
+<p>Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.</p>
+
+<p>Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<pre class="brush: css">/* стиль для начальной буквой C в первом пункте*/
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="Группировка_селекторов">Группировка селекторов</h3>
+
+<p>Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.</p>
+
+<p>В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.</p>
+
+<p>Удобно определить цвет только в одном месте, в случае, если возможны изменения.</p>
+
+<pre class="brush: css">/* цвет для заголовков */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="Действуем_добавление_комментариев_и_улучшения_формата">Действуем: добавление комментариев и улучшения формата</h2>
+
+<ol>
+ <li>Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке):
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li>
+ <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">Задание</div>
+
+<p>Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Существует более чем один способ сделать это).</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:
+
+<pre class="brush: css">/*.carrot {
+  color: orange;
+}*/</pre>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p>