renovations

8-css-for-js/1-css-why/article.md

@@ -0,0 +1,75 @@
+# О чём пойдёт речь
+
+Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы *уже* знаете CSS, во всяком случае понимаете его на таком уровне, который позволяет делать Web-страницы.
+
+[cut]
+Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, "делать красиво". Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком. 
+
+**Вот что он должен уметь абсолютно точно -- так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать**. 
+
+Это требует отличного знания CSS в области позиционирования элементов, включая тонкости работы `display`, `margin`, `border`, `outline`, `position`, `float`, `border-box` и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).
+
+Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.
+
+[summary]
+Если что-то можно сделать через CSS -- лучше делать это через CSS.
+[/summary]
+
+Причина проста -- обычно, даже если CSS на вид сложнее -- поддерживать и развивать его проще, чем JS. Поэтому овчинка стоит выделки.
+
+Кроме того, есть ещё одно наблюдение.
+
+[summary]
+Знание JavaScript не может заменить знание CSS.
+[/summary]
+
+Жить становится приятнее и проще, если есть хорошее знание и CSS и JavaScript. 
+
+## Чек-лист
+
+Ниже находится "чек-лист". Если хоть одно свойство незнакомо -- это стоп-сигнал для дальнейшего чтения этого раздела.
+
+<ul>
+<li>Блочная модель, включая:
+<ul>
+<li>`margin`, `padding`, `border`, `overflow`</li>
+<li>а также `height/width` и `min-height/min-width`.</li>
+</ul>
+</li>
+<li>Текст:
+<ul>
+<li>`font`</li><li>`line-height`.</li>
+</ul></li>
+<li>Различные курсоры `cursor`.</li>
+<li>Позиционирование:
+<ul><li>`position`, `float`, `clear`, `display`, `visibility`</li>
+<li>Центрирование при помощи CSS</li>
+<li>Перекрытие `z-index` и прозрачность `opacity`</li>
+</ul>
+</li>
+<li>Cелекторы:
+<ul><li>Приоритет селекторов</li>
+<li>Селекторы `#id`, `.class`, `a > b`</li>
+</ul>
+</li>
+<li>Сброс браузерных стилей, <a href="http://meyerweb.com/eric/tools/css/reset/">reset.css</a>
+</li>
+</ul>
+
+## Почитать 
+
+Книжек много, но хороших -- как всегда, мало. 
+
+С уверенностью могу рекомендовать следующие:
+
+
+<ul>
+<li><a href="http://www.ozon.ru/context/detail/id/24493075/?partner=iliakan">Большая книга CSS3.</a>
+<i>Дэвид Макфарланд.</i></li>
+<li><a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство.</a>
+<i>Эрик Мейер</i></li>
+</ul>
+
+Дальнейшие статьи раздела не являются *учебником* CSS, поэтому пожалуйста, изучите эту технологию до них. 
+
+Это очерки для лучшей систематизации и дополнения уже существующих знаний.