jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions
en.javascript.info/8-css-for-js/1-css-why/article.md
Ilya Kantor 6ac9e3a500 renovations
2015-03-07 19:26:10 +03:00

4.3 KiB
Raw Blame History

О чём пойдёт речь

Неужели мы сейчас будем учить 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.

Чек-лист

Ниже находится "чек-лист". Если хоть одно свойство незнакомо -- это стоп-сигнал для дальнейшего чтения этого раздела.

  • Блочная модель, включая:
    • `margin`, `padding`, `border`, `overflow`
    • а также `height/width` и `min-height/min-width`.
  • Текст:
    • `font`
    • `line-height`.
  • Различные курсоры `cursor`.
  • Позиционирование:
    • `position`, `float`, `clear`, `display`, `visibility`
    • Центрирование при помощи CSS
    • Перекрытие `z-index` и прозрачность `opacity`
  • Cелекторы:
    • Приоритет селекторов
    • Селекторы `#id`, `.class`, `a > b`
  • Сброс браузерных стилей, reset.css

Почитать

Книжек много, но хороших -- как всегда, мало.

С уверенностью могу рекомендовать следующие:

Дальнейшие статьи раздела не являются учебником CSS, поэтому пожалуйста, изучите эту технологию до них.

Это очерки для лучшей систематизации и дополнения уже существующих знаний.