Обновление статьи "Стили и классы"

Author: Alexandre887

2-ui/1-document/08-styles-and-classes/article.md

@@ -21,6 +21,25 @@ elem.style.left = left; // например, '123px', значение вычи
 elem.style.top = top; // например, '456px'
 ```
 
+Мы также можем установить сразу несколько стилей для элемента, используя свойство `cssText`. Но с ним нужно быть осторожнее, т.к оно может как добавить стили к существующим, так и полностью перезаписать их на новые:
+
+```js
+let top = /* сложные расчёты */;
+let left = /* сложные расчёты */;
+
+elem.style.cssText *!*=*/!* ` // полная перезапись стилей elem, используем =
+  top: ${top};
+  left: ${left};
+`;
+
+elem.style.cssText *!*+=*/!* ` // добавление к существующим стилям elem новых стилей, используем +=
+  top: ${top};
+  left: ${left};
+`;
+
+// если элементу уже заданы стили, которые мы хотим добавить (+=), они будут перезаписаны на новые.
+```
+
 В других случаях, например, чтобы сделать текст красным, добавить значок фона -- описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.
 
 ## className и classList
@@ -82,11 +101,19 @@ elem.style.top = top; // например, '456px'
 </body>
 ```
 
-## Element style
+## Свойство style
 
-Свойство `elem.style` - это объект, который соответствует тому, что написано в атрибуте `"style"`. Установка стиля `elem.style.width="100px"` работает так же, как наличие в атрибуте `style` строки `width:100px`.
+Свойство `elem.style` - это объект, который соответствует тому, что написано в атрибуте `"style"`. 
 
-Для свойства из нескольких слов используется camelCase:
+Свойства из одного слова записываются так же, с маленькой буквы:
+
+```js no-beautify
+background  => elem.style.background
+top         => elem.style.top
+opacity     => elem.style.opacity
+```
+
+Для свойств из нескольких слов используется [camelCase](https://ru.wikipedia.org/wiki/CamelCase):
 
 ```js no-beautify
 background-color  => elem.style.backgroundColor
@@ -128,31 +155,6 @@ setTimeout(() => document.body.style.display = "", 1000); // возврат к 
 
 Если мы установим в `style.display` пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства `style.display` вообще не было.
 
-````smart header="Полная перезапись `style.cssText`"
-Обычно мы используем `style.*` для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, `div.style="color: red; width: 100px"`, потому что `div.style` -- это объект, и он доступен только для чтения.
-
-Для задания нескольких стилей в одной строке используется специальное свойство `style.cssText`:
-
-```html run
-<div id="div">Button</div>
-
-<script>
-  // можем даже устанавливать специальные флаги для стилей, например, "important"
-  div.style.cssText=`color: red !important;
-    background-color: yellow;
-    width: 100px;
-    text-align: center;
-  `;
-
-  alert(div.style.cssText);
-</script>
-```
-
-Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Можно ненароком удалить что-то нужное. Но его можно использовать, к примеру, для новых элементов, когда мы точно знаем, что не удалим существующий стиль.
-
-То же самое можно сделать установкой атрибута: `div.setAttribute('style', 'color: red...')`.
-````
-
 ## Следите за единицами измерения
 
 Не забудьте добавить к значениям единицы измерения.