"...Блоки разные верстать и с шрифтами как играть учат в школе, учат в школе, учат в школе." Отзыв на книгу "CSS: The Missing Manual, 4th edition"

Отрицание, или "Ты помнишь, как всё начиналось"

Современная профессиональная разработка ПО настолько комплексное занятие, что часто приходится выходить из зоны комфорта чтобы посмотреть в каких ещё направлениях работают другие люди чтобы улучшить продукт.

Программы, в которых основная работа выполняется без участия человека, зачастую всё равно не обходятся без создания web UI (например интерфейс для управления и настройки).
Раньше в Java мире проблему создания таких web UI силами backend разработчиков решали фреймворками (например Vaadin, GWT), которые позволяли не зная CSS и JS описывать UI на Java. И оно даже стабильно работало, если приложение - просто прослойка для работы с БД.
Ожидаемо интерфейсы выглядели как под копирку, были слабо кастомизируемы, тратили ресурсы серверов на динамическую генерацию html, и выглядели по-энтерпрайзному уныло (разработчикам было пофиг, да и задачи "сделать хорошо" не ставилось). Иногда вишенкой на торте было то, что попытка интегрировать код UI-фреймворков с кучей магии, в которую никто не вникал, в многопоточное и динамическое окружение сложного backend-а приводила к появлению race conditions, которые обязательно что-то ломали на продакшене, и к утечкам памяти. Нет, авторы этих фреймворков не идиоты. Но мощь и гибкость этих вещей иногда играла злую шутку с теми, кто думал: "Ну оно ведь и так должно работать. Это же почти как в том примере из документации!"

Осознание и принятие

В итоге, поигравшись с этими инструментами и хлебнув всякого, люди приняли мысль о том, что UI надо писать всё-таки подходящими для этого инструментами, которые давно уже существуют, эволюционируют и которыми все пользуются. Ну и концепция SPA кажется прикольной. Гулять так гулять!
И тут перед вчерашним backend-разработчиком появляются три новых зверя: HTML, JavaScript, CSS.
Ну с первым всё просто - это ещё один достаточно простой язык разметки.
Посмотрев на JavaScript понимаешь, что это необходимое зло, но вполне по силам. Если уж совсем не нравится, то можно выбрать более современные и приятные языки типа TypeScript, Dart. Или взять целые фреймворки: Angular, React. Можно вообще уйти в отрыв и прикоснуться к чудесному миру функционального программирования и Lisp-a изучив ClojureScript. В итоге, очень условно ты просто переключаешься на работу с шаблонизатором в немного другом окружении. Ну, не велика беда.

Боль и ненависть

Разобравшись с понравившимся языком для браузера уже чувствуешь: "Ну давайте, что у вас там есть, я вам щас всё сделаю". И ты делаешь. И оно даже работает по ТЗ, но приятным UI это явно не назовешь. И тут ты вспоминаешь про третий элемент паззла - CSS.
Но отчаянные попытки хаотично набросать "магических стилей" из ответов на SO начинают либо дико колбасить верстку, либо не дают желаемого эффекта. Ты не понимаешь что происходит и голова начинает медленно пухнуть от напряжения. И со словами классика: "И так сойдёт", закрываешь редактор и обещаешь себе больше никогда не браться за похожие задачи.

Осознание и решение

Через какое-то время осознаешь, что делать это всё-таки придётся и дальше и в этой магии стилей всё-таки надо разобраться. "В конце концов стилями просто задаётся алгоритм изменения отображения элементов и там всё должно быть детерминировано", - успокаиваешь себя и начинаешь искать годные учебники по этой теме.

Лично для меня изучение CSS - это одна из тех областей, к изучению которых я подходил несколько раз, но до её уверенного понимания так и не дошёл. Но как только стало понятно, что на работе этим придётся серьёзно заниматься, то стал искать литературу как обычно это делаю запросом в гугле "best books <тут подставить тему>". Я искал что-то с хорошими рекомендациями и относительно новое. И вот тут мне попалась на глаза книга "CSS: The Missing Manual, 4th edition". Она относительно новая, с хорошими отзывами и очень объёмная (более 500 страниц) и, отправляясь в отпуск, решил, что должен её за две недели точно осилить.

Действие, или вот тут начинается отзыв на книгу:)

Сказать, что я был в восторге от этой книги - не сказать ничего.

Сначала рассказывается о семантической верстке html5, которая задаёт каркас страницы. Далее достаточно детально описываются правила применения каскадных стилей к элементам с учётом многих нюансов. После этого понимаешь, что основные принципы применения стилей ты понял и готов изучать конкретные свойства, задаваемые в стилях. И вот в этой части идёт очень детальный разбор набора свойств с кучей примеров.

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

Освоив стили, автор предлагает подняться на уровень выше и описывает различные типы вёрстки: fixed, fluid, responsive, flex, grids, которые задают визуальную структуру сайта. Вот за этот раздел отдельный респект автору.

Но это ещё не всё: в книге затрагиваются даже такие современные и нечасто используемые элементы CSS, как трансформации элементов и, держитесь за кресла, анимации! Анимации на чистом CSS без JS, Карл! И они не разу не банальные. Многие эффекты, которые раньше достигались только библиотеками анимаций JQuery, теперь можно делать без них.

Также в книге постоянно встречаются ссылки на статьи, в которых можно почитать про разные дополнительные изощрения, которые придумывали находчивые верстальщики.

В конце книги есть главы, посвященные работе с препроцессором Sass для тех, кто готов подходить к задачам вёрстки в промышленных масштабах.

Я остался доволен этой книгой и всячески её рекомендую. Да, она не маленькая. Но какой смысл пытаться урывками из разных источников понять такую непростую тему как CSS и верстка, когда существует такое комплексное решение? Без надёжного фундамента эти темы так и будут оставаться магией, которая исчезает при малейшей попытке добиться немного другого эффекта.
Конечно, для закрепления материала нужна постоянная практика. Если у вас её нет на работе или не готовы самостоятельно практиковаться - не стоит начинать. Это явно не та тема, в которой можно будет что-то додумать и получить достойный результат получив только небольшой базис.
Лучше обратитесь к профессиональным верстальщикам. Эти люди определённо не зря едят хлеб и сэкономят вам кучу нервов и времени.