Арсений Матыцин - Я верстальщик. Веб-верстальщик

Преобразованный в HTML:

И в обязательном порядке устанавливаю плагин Show Whitespace в исполнении Dennis Kehrig (В магазине несколько таких плагинов и этот, на мой взгляд, самый адекватный в исполнении). Этот плагин позволяет подсвечивать пробелы и табуляцию – таким образом круче управлять своим кодом.

После установки плагинов я устанавливаю настройку отступов в формат табуляции со значением в 4.

Настройка находится в нижнем правом углу редактора Brackets.

Лично мне легче работать с кодом именно таким образом. Так отступы всегда формируют читаемый код, что особенно важно при работе, например c препроцессором SASS (не путать с SCSS). Другой популярный метод – пробелы в 2 единицы.

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

Это в общем все. Для комфортного написания кода стоит просто настроить свое пространство для этого самого комфорта. К теме также можно отнести и выбор хорошего кресла, но это уже совсем другая история.

Не забывайте, кроме фактора удобства и популярности существуют требования языка. Например YAML требует запись в 2 пробела.

Автозамена в 20+ файлах – это просто волшебный редактор, когда необходимо провести автозамену в тонне файлов, любой другой навороченный редактор заглохнет и начнет чихать.

Редактирование отдельно-стоящих файлов. Незачем грузить полноценную IDE для редактирования одного файла, например при использовании FTP-клиента. На всех компьютерах, на которых я работал, notepad загружается крайне быстро. В то время, как тот же Brackets приходится ждать. Чего уж говорить про PHPStorm.

Необходимо обнулить стили. Если я беру какой-то текст с сайта, то вместе с ним тянутся и стили, заголовки и иное форматирование. И не всегда связка Ctrl+Shift+V спасает. В таком случае я запускаю Notepad ++.

Палочка-выручалочка

Если вы открыли ту самую тонну файлов в notepad и пытаетесь их закрыть, в меню Файл есть волшебная кнопка «Закрыть все».

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

Для примера я решил взять главную страницу Яндекса:

Главная Яндекса без стилей.

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

Важно!: кроме head я удалил шапку и содержимое, которое выводило мою личную информацию.

Вот то же самое, только без участия тегов. Все содержимое я скопировал и вставил в тег p.

Главная Яндекса без верстки вообще.

Внимательный читатель обратит внимание, что 2 страницы браузера не сильно похожи одна на другую. Таким образом можно утверждать, что верстка – это перевод текста [читай контента] в другое качественное состояние. Точно так же, как это делают в типографии в классическом исполнении верстки.

В данном примере используются теги заголовков (H1), параграфа (p) и нумерованного списка (ol).

Обратите внимание:

Все теги форматирующие текст по-умолчанию имеют свое оформление. Например у списка есть отступ слева + нумерация, заголовки отличительно больше, чем основной текст, ссылки подсвечиваются и подчеркиваются и т.д. Первое желание начинающего дизайнера – поменять все стили на какие-нибудь «крутые». Ссылки сделать в цвет радуги, заголовкам дать новые отступы или учудить еще какую-нибудь ересь. Окститесь, ребята, в большинстве случаев не стоит так делать. Для того и создавались стандарты, чтобы пользователь мог понять, что ссылка это ссылка, заголовок это заголовок, который относится именно к вот этому абзацу. В этом деле существует много исключений, но работая с текстом всегда нужно взвесить все за и против, прежде, чем необдуманно броситься делать все «красивенько».