You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Prefer comments on their own line. Avoid end-of-line comments.
121
-
* Рекомендуется писать комментарии в отдельные строки.
113
+
* Рекомендуется писать комментарии в отдельные строки. Старайтесь избегать комментариев в конце строки.
122
114
* Write detailed comments for code that isn't self-documenting:
123
-
* Пишите детальные комментарии для незадокументированных частей кода
124
-
- Uses of z-index
115
+
* Пишите детальные комментарии для незадокументированных частей кода:
125
116
- Использование z-index
126
-
- Compatibility or browser-specific hacks
127
-
- Совместимость или CSS-хаки
117
+
- Совместимость с браузерами или CSS-хаки
128
118
129
119
### Объектно-ориентированный CSS и БЭМ
130
120
131
-
We encourage some combination of OOCSS and BEM for these reasons:
132
-
Мы реккомендуем комбинировать Объектно-ориентированный CSS и БЭМ по следующим причинам:
121
+
Мы рекомендуем комбинировать Объектно-ориентированный CSS и БЭМ по следующим причинам:
133
122
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.
137
124
* Помогает создавать многоразовые, составные компоненты.
138
-
* It allows for less nesting and lower specificity
139
-
* Меньше вложенностей низкая спецефичность
140
-
* It helps in building scalable stylesheets
141
-
* Способствует созданию скалируемых таблиц стилей.
125
+
* Меньше вложенностей, низкая специфичность правил.
126
+
* Способствует созданию масштабируемых таблиц стилей.
127
+
142
128
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.
144
129
**OOCSS**, или "Объектно-ориентированный CSS", это подход к написанию CSS, который призывает думать о таблице стилей, как о коллекции "объектов": многоразовых, повторяемых фрагментах кода, которые могут использоваться независимо друг от друга на всём сайте.
* Smashing Magazine [Введение в Объектно-ориентированный CSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
147
132
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.
149
133
**БЭМ**, или "Блок-Элемент-Модификатор", это соглашение об именовании классов в HTML и CSS. Разработано Яндексом с прицелом на большие объёмы кода и масштабируемость. Может послужить как солидный набор правил для использования OOCSS.
* 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/)
152
136
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
+
Подчеркивания и тире по-прежнему используются для модификаторов и элементов.
156
139
**Примеры**
157
140
158
141
```jsx
@@ -180,25 +163,20 @@ function ListingCard() {
180
163
.ListingCard__content { }
181
164
```
182
165
183
-
*`.ListingCard` is the “block” and represents the higher-level component
184
166
* `.ListingCard` является "блоком" и представляет родительский компонент
185
-
*`.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole.
186
167
* `.ListingCard__title` является "элементом" и представляет дочерний компонент `.ListingCard` который позволяет составить блок в целом.
187
-
*`.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block.
188
168
* `.ListingCard--featured` является "модификатором" и представляет разные состояния `.ListingCard`.
189
169
190
-
### Селекторы ID
170
+
### Селекторы по ID
191
171
192
172
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 селекторы предоставляют неоправданно высокий уровень специфичности и невозможность многоразового использования.
195
174
Более подробная информация по этому вопросу: [Статья CSS Wizardry](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/)
196
175
197
176
### JavaScript хуки
198
177
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
+
202
180
Мы реккомендуем создавать отдельные имена классов для JavaScript используя префикс `.js-`:
203
181
204
182
```html
@@ -229,17 +207,14 @@ Use `0` instead of `none` to specify that a style has no border.
229
207
230
208
### Синтаксис
231
209
232
-
* Use the `.scss` syntax, never the original `.sass` syntax
233
210
* Всегда используйте `.scss` синтаксис, и никогда, оригинальный `.sass` синтаксис.
234
-
* Order your regular CSS and `@include` declarations logically (see below)
235
211
* Упорядочивайте обычный CSS и `@include`-объявления логически.
236
212
237
213
### Порядок объявления свойств
238
214
239
215
1. Объявления свойств
240
216
241
-
List all standard property declarations, anything that isn't an `@include` or a nested selector.
242
-
Перечислите все стандартные свойства объявления, всё что не является `@include`-объявлением или вложенным селектором
217
+
Перечислите все стандартные объявления свойств, всё что не является `@include`-объявлением или вложенным селектором.
243
218
244
219
```scss
245
220
.btn-green {
@@ -251,8 +226,7 @@ Use `0` instead of `none` to specify that a style has no border.
251
226
252
227
2. `@include`-объявления
253
228
254
-
Grouping `@include`s at the end makes it easier to read the entire selector.
255
-
Группирование `@include`-объявлений в конце селектора делает его более читаемым.
229
+
Группирование `@include`-объявлений в конце правила делает его более читаемым.
0 commit comments