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
Copy file name to clipboardExpand all lines: README.md
+16-12Lines changed: 16 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,6 +29,7 @@
29
29
### Объявление правил
30
30
31
31
Правило — это имя селектора (или группы селекторов) с определённой группой свойств.
32
+
32
33
Пример:
33
34
```css
34
35
.listing {
@@ -40,6 +41,7 @@
40
41
### Селекторы
41
42
42
43
В объявлении правила «селекторы» означают элементы в DOM, к которым будут применены объявленные свойства. Селекторы могут соответствовать HTML-тэгам, классам элементов, id или атрибутам.
44
+
43
45
Пример использования селекторов:
44
46
45
47
```css
@@ -54,7 +56,8 @@
54
56
55
57
### Свойства
56
58
57
-
Наконец, свойства — это то, что описывает стиль выбранных элементов. Свойства указываются в виде `ключ: значение`. Правила могут содержать одно или более объявленных свойств.
59
+
Наконец, свойства — это то, что описывает стиль выбранных элементов. Свойства указываются в виде `ключ:значение`. Правила могут содержать одно или более объявленных свойств.
60
+
58
61
Выглядит это так:
59
62
60
63
```css
@@ -244,17 +247,17 @@ function ListingCard() {
244
247
245
248
Вложенные селекторы (_если они небходимы_) идут в самом конце, и ничего не должно идти после них. Добавляйте пустую строку между свойствами правила и вложенными селекторами, а также между смежными вложенными селекторами. Применяйте эти правила ко всем вложенным селекторам.
246
249
247
-
```scss
248
-
.btn {
249
-
background: green;
250
-
font-weight: bold;
251
-
@includetransition(background0.5sease);
250
+
```scss
251
+
.btn {
252
+
background: green;
253
+
font-weight: bold;
254
+
@includetransition(background0.5sease);
252
255
253
-
.icon {
254
-
margin-right: 10px;
255
-
}
256
-
}
257
-
```
256
+
.icon {
257
+
margin-right: 10px;
258
+
}
259
+
}
260
+
```
258
261
259
262
### Переменные
260
263
@@ -282,7 +285,7 @@ function ListingCard() {
282
285
}
283
286
```
284
287
285
-
Когда вы пишите такие длинные селекторы, вы, вероятно, пишите CSS, который:
288
+
Когда вы пишите такие длинные селекторы, вы, вероятно, пишите CSS который:
286
289
287
290
* слишком сильно привязан к HTML (хрупкий); *—или—*
288
291
* чрезмерно специфичный; *—или—*
@@ -293,6 +296,7 @@ function ListingCard() {
293
296
294
297
Если всё-таки пришлось использовать селекторы ID (а этого на самом деле лучше избегать), они никогда не должны быть вложенными. Если такое происходит, вам требуется пересмотреть свою разметку и выяснить, зачем нужна такая сильная специфика. Если у вас правильно структурирован HTML-код и CSS-стили, вам **никогда** не придётся это делать.
0 commit comments