Skip to content

Commit 6ae08a4

Browse files
AlexAlex
authored andcommitted
Update README.md
1 parent 628f473 commit 6ae08a4

File tree

1 file changed

+26
-52
lines changed

1 file changed

+26
-52
lines changed

README.md

Lines changed: 26 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
### Объявление правил
3030

31-
"Объявление правил" это: имя данное селектору (или группе селекторов) с сопутствующими им свойствами. Например:
31+
"Объявление правил" это имя данное селектору (или группе селекторов) с сопутствующими ему свойствами. Например:
3232

3333
```css
3434
.listing {
@@ -66,22 +66,16 @@
6666

6767
## CSS
6868

69-
### Форматтировение
69+
### Форматирование
7070

71-
* Используйте 2 пробела для отступов
72-
* Предпочитают подчеркивание CamelCase'у в именах классов.
71+
* Используйте 2 пробела для отступов.
72+
* Предпочитайте подчеркивание CamelCase'у в именах классов.
7373
- Подчеркивания и PascalCasing допустимы, если вы используете БЭМ (смотри [Объектно-ориентированный CSS и БЭМ](#oocss-and-bem) далее)
74-
* Do not use ID selectors
75-
* Не используйте селекторы по ID
76-
* When using multiple selectors in a rule declaration, give each selector its own line.
77-
* Используя несколько селекторов в объявление правил, переносите каждый селектор на отдельную строку
78-
* Put a space before the opening brace `{` in rule declarations
79-
* Ставьте пробел перед открывающими скобками `{`
80-
* In properties, put a space after, but not before, the `:` character.
74+
* Не используйте селекторы по ID.
75+
* Используя несколько селекторов в объявлении правила, переносите каждый селектор на отдельную строку.
76+
<!--* Ставьте пробел перед открывающей скобкой `{`.
8177
* В свойствах ставьте пробел после двоеточия `:`, но не перед.
82-
* Put closing braces `}` of rule declarations on a new line
8378
* После объявления свойстав переносите закрывающую скобку `}` на новую строку.
84-
* Put blank lines between rule declarations
8579
* Делайте отступ в одну строку между объявлениями правил.
8680
8781
**Плохо**
@@ -115,44 +109,33 @@
115109
116110
### Комментарии
117111
118-
* Prefer line comments (`//` in Sass-land) to block comments.
119112
* Предпочитайте однострочные (`//`) комментарии многострочным .
120-
* Prefer comments on their own line. Avoid end-of-line comments.
121-
* Рекомендуется писать комментарии в отдельные строки.
113+
* Рекомендуется писать комментарии в отдельные строки. Старайтесь избегать комментариев в конце строки.
122114
* Write detailed comments for code that isn't self-documenting:
123-
* Пишите детальные комментарии для незадокументированных частей кода
124-
- Uses of z-index
115+
* Пишите детальные комментарии для незадокументированных частей кода:
125116
- Использование z-index
126-
- Compatibility or browser-specific hacks
127-
- Совместимость или CSS-хаки
117+
- Совместимость с браузерами или CSS-хаки
128118
129119
### Объектно-ориентированный CSS и БЭМ
130120
131-
We encourage some combination of OOCSS and BEM for these reasons:
132-
Мы реккомендуем комбинировать Объектно-ориентированный CSS и БЭМ по следующим причинам:
121+
Мы рекомендуем комбинировать Объектно-ориентированный CSS и БЭМ по следующим причинам:
133122
134-
* It helps create clear, strict relationships between CSS and HTML
135-
* Это помогает создавать чистую свзять между CSS и HTML.
136-
* It helps us create reusable, composable components
123+
* Это помогает создать чистую, строгую связь между CSS и HTML.
137124
* Помогает создавать многоразовые, составные компоненты.
138-
* It allows for less nesting and lower specificity
139-
* Меньше вложенностей низкая спецефичность
140-
* It helps in building scalable stylesheets
141-
* Способствует созданию скалируемых таблиц стилей.
125+
* Меньше вложенностей, низкая специфичность правил.
126+
* Способствует созданию масштабируемых таблиц стилей.
127+
142128
143-
**OOCSS**, or “Object Oriented CSS”, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of “objects”: reusuable, repeatable snippets that can be used independently throughout a website.
144129
**OOCSS**, или "Объектно-ориентированный CSS", это подход к написанию CSS, который призывает думать о таблице стилей, как о коллекции "объектов": многоразовых, повторяемых фрагментах кода, которые могут использоваться независимо друг от друга на всём сайте.
145-
* Nicole Sullivan's [OOCSS вики](https://github.com/stubbornella/oocss/wiki)
146-
* Smashing Magazine's [Введение в Объектно-ориентированный CSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
130+
* Nicole Sullivan [OOCSS вики](https://github.com/stubbornella/oocss/wiki)
131+
* Smashing Magazine [Введение в Объектно-ориентированный CSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
147132
148-
**BEM**, or “Block-Element-Modifier”, is a _naming convention_ for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS.
149133
**БЭМ**, или "Блок-Элемент-Модификатор", это соглашение об именовании классов в HTML и CSS. Разработано Яндексом с прицелом на большие объёмы кода и масштабируемость. Может послужить как солидный набор правил для использования OOCSS.
150134
* CSS Trick's [БЭМ 101](https://css-tricks.com/bem-101/)
151-
* Harry Roberts' [Введение в БЭМ](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
135+
* Harry Roberts [Введение в БЭМ](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
152136
153-
We recommend a variant of BEM with PascalCased “blocks”, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children.
154-
Мы реккомендуем вариант БЭМ в котором используется PascalCased "блоки", отлично работающие в связке с компонентами (например React).
155-
Подчеркивания и тире используются для модификаторов и элементов.
137+
Мы рекомендуем вариант БЭМ в котором используется PascalCased "блоки", отлично работающие в связке с компонентами (например React).
138+
Подчеркивания и тире по-прежнему используются для модификаторов и элементов.
156139
**Примеры**
157140
158141
```jsx
@@ -180,25 +163,20 @@ function ListingCard() {
180163
.ListingCard__content { }
181164
```
182165
183-
* `.ListingCard` is the “block” and represents the higher-level component
184166
* `.ListingCard` является "блоком" и представляет родительский компонент
185-
* `.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole.
186167
* `.ListingCard__title` является "элементом" и представляет дочерний компонент `.ListingCard` который позволяет составить блок в целом.
187-
* `.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block.
188168
* `.ListingCard--featured` является "модификатором" и представляет разные состояния `.ListingCard`.
189169
190-
### Селекторы ID
170+
### Селекторы по ID
191171
192172
While it is possible to select elements by ID in CSS, it should generally be considered an anti-pattern. ID selectors introduce an unnecessarily high level of [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to your rule declarations, and they are not reusable.
193-
Возможность выбирать элементы по ID в CSS должна, как правило, рассматриваться плохой практикой. ID селекторы предоставляют неоправданно высокий уровень *допилить*
194-
For more on this subject, read [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) on dealing with specificity.
173+
Возможность выбирать элементы по ID в CSS является, как правило, плохой практикой. ID селекторы предоставляют неоправданно высокий уровень специфичности и невозможность многоразового использования.
195174
Более подробная информация по этому вопросу: [Статья CSS Wizardry](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/)
196175
197176
### JavaScript хуки
198177
199-
Avoid binding to the same class in both your CSS and JavaScript. Conflating the two often leads to, at a minimum, time wasted during refactoring when a developer must cross-reference each class they are changing, and at its worst, developers being afraid to make changes for fear of breaking functionality.
200-
Избегайте использования одинаковых имён классов в CSS и JavaScript. Использование одинаковых имён классов может привести, как минимум, к трате времени при рефакторинге, и как максимум к боязне разработчика сломать функционал вводом новых изменений.
201-
We recommend creating JavaScript-specific classes to bind to, prefixed with `.js-`:
178+
Избегайте использования одинаковых имён классов в CSS и JavaScript. Использование одинаковых имён классов может привести, как минимум, к трате времени при рефакторинге, и как максимум к боязне разработчика сломать функционал вводом изменений.
179+
202180
Мы реккомендуем создавать отдельные имена классов для JavaScript используя префикс `.js-`:
203181
204182
```html
@@ -229,17 +207,14 @@ Use `0` instead of `none` to specify that a style has no border.
229207
230208
### Синтаксис
231209
232-
* Use the `.scss` syntax, never the original `.sass` syntax
233210
* Всегда используйте `.scss` синтаксис, и никогда, оригинальный `.sass` синтаксис.
234-
* Order your regular CSS and `@include` declarations logically (see below)
235211
* Упорядочивайте обычный CSS и `@include`-объявления логически.
236212
237213
### Порядок объявления свойств
238214
239215
1. Объявления свойств
240216
241-
List all standard property declarations, anything that isn't an `@include` or a nested selector.
242-
Перечислите все стандартные свойства объявления, всё что не является `@include`-объявлением или вложенным селектором
217+
Перечислите все стандартные объявления свойств, всё что не является `@include`-объявлением или вложенным селектором.
243218
244219
```scss
245220
.btn-green {
@@ -251,8 +226,7 @@ Use `0` instead of `none` to specify that a style has no border.
251226
252227
2. `@include`-объявления
253228
254-
Grouping `@include`s at the end makes it easier to read the entire selector.
255-
Группирование `@include`-объявлений в конце селектора делает его более читаемым.
229+
Группирование `@include`-объявлений в конце правила делает его более читаемым.
256230
257231
```scss
258232
.btn-green {

0 commit comments

Comments
 (0)