Update README.md

zhrivodkin · web-flow · commit 7cd6c69a458c · 2020-06-13T20:58:47.000+03:00
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 ## Навигация
 
 1. [Терминология](#Терминология)
-    - [Объявление правила](#Объявление-правила)
+    - [Объявление правил](#Объявление-правил)
     - [Селекторы](#Селекторы)
     - [Свойства](#Свойства)
 2. [CSS](#css)
@@ -26,9 +26,9 @@
 
 ## Терминология
 
-### Объявление правила
+### Объявление правил
 
-Правило это имя селектора (или группы селекторов) с определенной группой свойств.
+Правило — это имя селектора (или группы селекторов) с определённой группой свойств.
 Пример:
 ```css
 .listing {
@@ -39,7 +39,7 @@
 
 ### Селекторы
 
-В объявлении правила, "селекторы" означают элементы в DOM, к которым будут применены объявленные свойства. Селекторы могут соответствовать HTML-тэгам, классам элементов, id или атрибутам.
+В объявлении правила «селекторы» означают элементы в DOM, к которым будут применены объявленные свойства. Селекторы могут соответствовать HTML-тэгам, классам элементов, id или атрибутам.
 Пример использования селекторов:
 
 ```css
@@ -54,7 +54,7 @@
 
 ### Свойства
 
-Наконец, свойства это то, что описывает стиль выбранных элементов. Свойства указываются в виде `ключ:значение`. Правила могут содержать один или более объявленных свойств.
+Наконец, свойства — это то, что описывает стиль выбранных элементов. Свойства указываются в виде `ключ: значение`. Правила могут содержать одно или более объявленных свойств.
 Выглядит это так:
 
 ```css
@@ -70,14 +70,14 @@
 
 ### Форматирование
 
-* Используйте табы (2 пробела) для отступов
+* Используйте мягкую табуляцию (2 пробела) для отступов.
 * Kebab-case предпочтительнее camelCase в названии классов.
   - Snake_case и PascalCase можно использовать при работе с BEM (подробнее [OOCSS и BEM](#oocss-и-bem)).
-* Не используйте селекторы #id
-* При использовании нескольких селекторов для одного правила - каждое начинается с новой строки.
-* Перед `{` ставим пробел в объявлении правила
-* В свойства после `:` добавляем пробел.
-* В конце объявления правила символ - `}`, должен переносится на новую строку.
+* Не используйте селекторы #id.
+* При использовании нескольких селекторов для одного правила каждое начинается с новой строки.
+* Перед `{` ставим пробел в объявлении правила.
+* В свойствах после `:` добавляем пробел.
+* В конце объявления правила символ `}` должен переноситься на новую строку.
 * Между объявлениями правил добавляйте пустую строку.
 
 **Плохо**
@@ -112,31 +112,31 @@
 ### Комментарии
 
 * Предпочитайте однострочные комментарии (`// в Sass`) многострочным.
-* Комментарий должен находится на отдельной строке. Избегайте комментариев в конце строки.
+* Комментарий должен находиться на отдельной строке. Избегайте комментариев в конце строки.
 * Пишите детальные комментарии для неочевидных вещей:
-  - Для z-index
-  - CSS-хаков для отдельных браузеров и совместимости
+  - для z-index;
+  - CSS-хаков для отдельных браузеров и совместимости.
 
 ### OOCSS и BEM
 
-Мы поощеряем некоторые комбинации OOCSS и BEM, вот почему:
+Мы поощряем некоторые комбинации OOCSS и BEM, вот почему:
 
-  * Это позволяет создавать чистую и строгую связь между CSS и HTML
-  * Это помогает нам создавать многоразовые, составные компоненты
-  * Меньше вложенностей, низкая специфичность правил.
-  * Это помогает создавать масштабируемые таблицы стилей
+  * это позволяет создавать чистую и строгую связь между CSS и HTML;
+  * это помогает нам создавать многоразовые, составные компоненты;
+  * меньше вложенностей, низкая специфичность правил;
+  * это помогает создавать масштабируемые таблицы стилей.
 
-**OOCSS**, или "Объектно-ориентированный CSS" - это подход к написанию CSS, который призывает думать о таблице стилей как о коллекции "объектов": многоразовых, повторяемых фрагментах кода, которые могут использоваться независимо друг от друга на всём сайте.
+**OOCSS**, или «Объектно-ориентированный CSS» — это подход к написанию CSS, который призывает думать о таблице стилей как о коллекции «объектов»: многоразовых, повторяемых фрагментах кода, которые могут использоваться независимо друг от друга на всём сайте.
 
   * Nicole Sullivan's [OOCSS wiki](https://github.com/stubbornella/oocss/wiki)
   * Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
 
-**BEM**, или "Блок-Элемент-Модификатор" - это соглашение об именовании классов в HTML и CSS. Разработано Яндексом с прицелом на большие объёмы кода и масштабируемость. Может послужить как солидный набор правил для использования OOCSS.
+**BEM**, или «Блок-Элемент-Модификатор» - это соглашение об именовании классов в HTML и CSS. Разработано Яндексом с прицелом на большие объёмы кода и масштабируемость. Может послужить как солидный набор правил для использования OOCSS.
 
   * CSS Trick's [BEM 101](https://css-tricks.com/bem-101/)
   * Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
 
-Мы рекомендуем вариант БЭМ, в котором используются PascalCased "блоки", отлично работающие в связке с компонентами (например React). Подчеркивания и тире по-прежнему используются для модификаторов и элементов.
+Мы рекомендуем вариант БЭМ, в котором используются PascalCased «блоки», отлично работающие в связке с компонентами (например, React). Подчёркивания и тире по-прежнему используются для модификаторов и элементов.
 
 **Пример**
 
@@ -165,21 +165,21 @@ function ListingCard() {
 .ListingCard__content { }
 ```
 
-* `.ListingCard` — это "блок" и он представляет из себя компонент верхнего уровня.
-* `.ListingCard__title` — это "элемент" и он является дочерним компонентом `.ListingCard`. Из "элементов" состоит "блок".
-* `.ListingCard--featured` — это "модификатор" и он предствляет различные состояния "блока" `.ListingCard`.
+* `.ListingCard` — это «блок» и он представляет из себя компонент верхнего уровня.
+* `.ListingCard__title` — это «элемент» и он является дочерним компонентом `.ListingCard`. Из «элементов» состоит «блок».
+* `.ListingCard--featured` — это «модификатор» и он предствляет различные состояния «блока» `.ListingCard`.
 
 ### Селекторы id
 
-Хоть в CSS и можно находить элемент по ID, это является плохой практикой. Селекторы ID вводят излишне высокий уровень [специфичности](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) для ваших правил, и лишает возможности их реиспользовать.
+Хоть в CSS и можно находить элемент по ID, это является плохой практикой. Селекторы ID вводят излишне высокий уровень [специфичности](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) для ваших правил и лишают возможности их переиспользовать.
 
-Более подробная статья на эту тему - [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) 
+Более подробная статья на эту тему: [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) 
 
-### JavaScript хуки
+### JavaScript-хуки
 
-Избегайте привязки к одному классу одновременно в CSS и Javascript. Это может привести как минимум, к трате времени при рефакторинге, а так же боязни разработчика сломать функционал вводом новых изменений.
+Избегайте привязки к одному классу одновременно в CSS и Javascript. Это может привести как минимум к трате времени при рефакторинге, а также боязни разработчика сломать функционал вводом новых изменений.
 
-Мы рекомендуем использовать префикс `.js-`, для тех элементов которые будут задействованы в Javascript:
+Мы рекомендуем использовать префикс `.js-`, для тех элементов, которые будут задействованы в Javascript:
 
 ```html
 <button class="btn btn-primary js-request-to-book">Request to Book</button>
@@ -210,7 +210,7 @@ function ListingCard() {
 
 ### Синтаксис
 
-* Используйте синтаксис `.scss`, заместо оригинального `.sass` синтаксиса
+* Используйте синтаксис `.scss` вместо оригинального `.sass` синтаксиса.
 * Упорядочивайте обычный CSS и `@include`-объявления логически.
 
 ### Сортировка свойств
@@ -229,7 +229,7 @@ function ListingCard() {
 
 2. Объявление `@include`
 
-    Группировка `@include` в конце правила - делает код более читаемым.
+    Группировка `@include` в конце правила делает код более читаемым.
 
     ```scss
     .btn-green {
@@ -242,7 +242,7 @@ function ListingCard() {
 
 3. Вложенные селекторы
 
-    Вложенные селекторы, (_если они небходимы_), идут в самом конце, и ничего не должно идти после них. Добавляйте пустую строку между свойствами правила и вложенными селекторами, а также между смежными вложенными селекторами. Применяйте эти правила ко всем вложенным селекторам.
+Вложенные селекторы (_если они небходимы_) идут в самом конце, и ничего не должно идти после них. Добавляйте пустую строку между свойствами правила и вложенными селекторами, а также между смежными вложенными селекторами. Применяйте эти правила ко всем вложенным селекторам.
 
     ```scss
     .btn {
@@ -258,11 +258,11 @@ function ListingCard() {
 
 ### Переменные
 
-Предпочитайте kebab-case именование переменных (напр. `$my-variable`) camelCase или snake_cased именованию. Допускается использовать знак нижнего подчеркивания для обозначения переменной используемой в пределах одного файла (напр. `$_my-variable`).
+Предпочитайте kebab-case именование переменных (напр. `$my-variable`) camelCase или snake_cased именованию. Допускается использовать знак нижнего подчеркивания для обозначения переменной, используемой в пределах одного файла (напр. `$_my-variable`).
 
 ### Миксины
 
-Миксины делают ваш код более чистым и понятным и позволяют поддерживать абстрактную сложность, так же как и хорошо названные функции. Миксины не принимающие аргументов могут быть полезны для этого, но нужно помнить, что если вы не сжимаете свои файлы (например gzip), то это может привести к лишнему повторению кода.
+Миксины делают ваш код более чистым и понятным и позволяют поддерживать абстрактную сложность, так же как и хорошо названные функции. Миксины, не принимающие аргументов, могут быть полезны для этого, но нужно помнить, что если вы не сжимаете свои файлы (например, gzip), то это может привести к лишнему повторению кода.
 
 ### Директива @extend
 
@@ -282,16 +282,16 @@ function ListingCard() {
 }
 ```
 
-Когда вы пишите такие длинные селекторы, вы вероятно пишите CSS который:
+Когда вы пишите такие длинные селекторы, вы, вероятно, пишите CSS, который:
 
-* Слишком сильно привязан к HTML (хрупкий) *—или—*
-* Чрезмерно специфичный *—или—*
-* Не реиспользуемый
+* слишком сильно привязан к HTML (хрупкий); *—или—*
+* чрезмерно специфичный; *—или—*
+* не переиспользуемый.
 
 
-Еще раз: **никаких вложенных ID селекторов!**
+Ещё раз: **никаких вложенных ID селекторов!**
 
-Если все-таки пришлось использовать селекторы ID (а этого на самом деле лучше избегать), они никогда не должны быть вложенными. Если такое происходит, вам требуется пересмотреть свою разметку и выяснить, зачем нужна такая сильная специфика. Если у вас правильно структурирован HTML-код и CSS-стили, вам **никогда** не придется это делать.
+Если всё-таки пришлось использовать селекторы ID (а этого на самом деле лучше избегать), они никогда не должны быть вложенными. Если такое происходит, вам требуется пересмотреть свою разметку и выяснить, зачем нужна такая сильная специфика. Если у вас правильно структурирован HTML-код и CSS-стили, вам **никогда** не придётся это делать.
 
 **[⬆ К навигации](#Навигация)**
 
