Шестнадцатый урок. Свой код

При верстке мы используем только готовые классы UniCSS и у нас ещё не было задачи придумывать что-то своё. Но, в своей практике вы столкнётесь с ситуацией, когда нужно будет использовать какой-то другой css-фреймворк или даже придумывать свой вариант с нуля.

Любая вебстудия имеет свои наработки, которые являются обязательными для использования. Это может быть не только фреймворк, но даже наборы правил именования файлов, классов и т.п. Самое простое с чем вы можете столкнуться — это написание полностью своего css-кода. Например при тестировании от вас могут потребовать сверстать страницу без сторонних библиотек.

Чтобы решать такие задачи следует определиться с минимальным набором необходимых знаний, который вы будете постоянно пополнять в течение многих лет. :-)

Итак. Базовые знания предполагают, что вы можете без подсказки написать начальный каркас HTML-страницы. Должен быть указан meta-тэг для кодировки UTF-8, TITLE. Если вы напишите строчку viewport, то это уже покажет ваш уровень подготовки.

Нужно уметь подключать внешние css-файлы и использовать STYLE для задания локальных стилей.

Из знаний HTML нужно уметь легко пользоваться тэгами физического форматирования текста: B, I, U, S и т.п. Вы должны понимать чем семантически отличается STRONG от B и EM от I. Такие вещи потребуют от вас заглянуть в справочник HTML и почитать документацию. Полное знание всех тонкостей и нюансов не требуется. Нужно лишь понимать, что есть такой-то тэг и он используется для того-то. В идеале, вы должны знать назначение каждого тэга из стандарта HTML4, но при этом понимать, что мы работаем в HTML5.

Сложные тэги, вроде AUDIO, VIDEO можно спокойно отложить на более позднее изучение, поскольку они крайне редки, ну или пока у вас не возникнет с ними задач.

Нужно иметь представление о «семантичных» тэгах SECTION, ARTICLE и прочих, которые мы рассматривали ранее. Самое лучшее руководство по семантике — это официальное руководство HTML5. Семантика — достаточно сложная штука даже для опытных верстальщиков, поэтому не ведитесь на различные примитивные «объяснялки». Как правило они не просто ошибочны, но часто прямо противоречат стандарту. В таких вещах — официальная документация всегда лучше.

Причем семантику в некоторых случаях лучше вообще не использовать. Например очень сложно выделить в лендинге самую важную часть: либо их много, либо он имеет сложную верстку. В таких случаях безошибочным будет использование универсальных DIV и SPAN. Иногда бывает даже проще вначале сверстать на этих тэгах, а уже в конце разметить html-семантику.

Что касается CSS, то тут требования уже выше из-за сложности кода. Поэтому при изучении CSS следует в первую очередь выделять наиболее частые задачи.

Например почти всегда требуется указывать margin и padding. Значит следует досконально разобраться с полной и короткой записью этих свойств.

Нужно понимать как задается цвет (color и background-color), размер шрифта, полужирность, курсив и подчеркивание. Уметь задавать выравнивание текста и выравнивание блока. Помнить, что у блока обязательна должна быть указана ширина.

С этими знаниями у вас будет доступ к более сложным вещам. В первую очередь это понимание float, flex, позиционирование (position), то есть то, что позволяет менять поток вывода документа.

Имеется ввиду, что такие знания у вас должны быть к концу этого курса.

С CSS связан ещё один важный момент. Перед написанием своего кода всегда следует подключать сброс стилей normalize.css и сброс border-box.

После сбросов обычно настраивается типографика страницы. Обычно это тэг BODY, например так:

body {
	font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #444;
	line-height: 1.4;
}

Здесь задается шрифт вывода по умолчанию, размер, цвет, интерлиньяж. Именно так будет выглядеть обычный текст на странице без своих классов и стилей.

После этого обычно настраивают вывод ссылок A: цвет, подчеркивание и hover-поведение, а за ним идут уже более специфичные настройки, вроде P, H1..H6 и т.д.

Все эти вещи делаются до указания css-стилей блоков страницы, чтобы базовая типографика распространялась уже на них. Дальше, если какое-то свойство не подходит для блока, оно для него переписывается ниже по коду.

В качестве домашнего задания мы сделам первый шажок в нужном направлении. Вам нужно будет создать новую страницу в LPF на любую астрономическую тему из википедии. Разметьте её html-тэгами, которые вы уже хорошо усвоили. Постарайтесь оформить страницу красиво, как считаете нужным.

Вторым этапом вам нужно сделать так, чтобы на этой странице работали только свои стили. Для этого в настройках страницы в секции VAR добавьте:

nocss: true

Это отключит подключение css-файла из assets.

Теперь в каталоге страницы сделайте подкаталог css и скопируйте в него normalize.css и сброс border-box.css из предыдущих уроков. Для того, чтобы normalize.css загрузился первым, переименуйте его в 1-normalize.css — то есть цифрой можно указать порядок загрузки файлов. Для второго файла используйте префикс 2-.

Сделайте там же новый файл 3-style.css, в котором вы будете писать свои стили.

В 3-style.css добавьте стили для BODY, A, P, H1..H6 для базовой типографики. Вы можете использовать готовые стили из UniCSS. И хотя фреймворк использует препроцессор Sass, во многом вы увидите привычный css-код. Берите только то, что понимаете и только то, что реально используется на странице.

Например вы решили использовать красный текст. Вы знаете, что это класс t-red (цвет, естественно, на ваш выбор):

.t-red { color: #f00; }

Таким образом 3-style.css будет наполняться теми классами, которые используются на странице и это будет ваш первый настоящий css-код. Начните с самых простых вещей, а сложные, вроде flex пока не используйте. Постепенно дорабатывйте эту страницу новыми блоками, классами и стилями.

Если на странце используются картинки, то замените их holder-заглушками. В LPF это делается так:

<img src="<?= mso_holder(300, 200) ?>">

— где 300 — это ширина, а 200 — высота изображения. У заглушки можно указать текст (только по английски) и цвет фона и цвет текста:

<img src="<?= mso_holder(300, 200, 'text', '#f0f080', '#ff0000') ?>">

Для проверки задания вышлите мне только каталог этой страницы в zip-архиве. Там должны быть index.php и все файлы из css.

В дальнейшем, по ходу обучения, самостоятельно наполняйте эту страницу новыми примерами. Отмечайте свой профессиональный рост.