7 правил быстрой верстки
Вы умеете хорошо верстать, но работа над одним макетом занимает много времени? Тогда эта статья для вас. Из нее вы узнаете, как можно научиться верстать быстрее, и что для этого нужно. В этой статье расписаны правила быстрой верстки без углублений и уроков. Все, что нужно, вы сможете найти в Google, - это лишь пособие от программиста с трёхлетним стажем верстки.
Правило №1: Используйте заготовки
Сделайте себе одну заготовку для всех макетов. Вам нужно создать свой фреймворк для верстки, нужные файлы и папки и установить нужные вам плагины (например jQuery, Bootstrap и т.д). Сохраните эту заготовку и используйте её для верстки. Просто скопируйте в папку с вашим проектом и начните писать код! Это намного ускорит вашу работу. На GitHub уже есть готовые заготовки от пользователя Agragregra (https://github.com/agragregra/start_html), пользуйтесь!
Правило №2: Сначала разметка, потом дизайн
Внимательно изучите макет и напишите его структуру в HTML, нарежьте изображения, а потом уже приступайте писать CSS. Не забывайте о грамотном коде: если вам нужно будет быстро что-то найти, а ваш код похож на набор символов без пробелов и отступов, вам будет трудно сориентироваться и оперативно заменить нужные вам данные.
Правило №3: Начните пользоваться пакетными менеджерами
Пора уже заканчивать посещать множество сайтов для того, чтобы скачать нужные вам плагины, а потом распаковывать их и копировать в папку с проектом. С помощью пакетного менеджера это можно сделать, просто написав парочку команд в терминале. Потратьте немного вашего времени на изучение пакетных менеджеров, например NPM или Bower - и вы поймете, насколько это удобно.
Правило №4: Редактор кода и расширения к нему
Все ещё кодите в блокноте* и по сто раз пишите border-radius, position: relative и прочее? Можно ведь просто написать br и нажать Tab (пример работы Emmet'а в Sublime Text) и редактор заменит эти две буквы на полноценный border-radius. Скачайте себе достойную программу для редактирования кода, например Sublime или Brackets и установите нужные вам расширения. Если вы ещё не знакомы с Emmet, Hayaku, Live Preview и прочими нужными плагинами для редакторов, самое время начать активно ими пользоваться.
*блокнот - имеется ввиду неполноценный редактор с недостаточным функционалом
Правило №5: Изучите SASS или LESS
Тратите время на поиск нужных вам строк в CSS? Установите и изучите SASS и меняйте одну переменную для всего проекта! С помощью динамического языка стилей Вы сможете менять все нужные вам цвета или размер шрифта на сайте, затронув только одну строку!
Правило №6: Многозадачность и верстка не совместимы
Не верстайте больше одного проекта одновременно! Если вы решили верстать два проекта сразу, вы потратите намного больше времени, чем если будете верстать их по отдельности. Вы начнёте путаться в файлах и коде, а к добру это не приведёт!
Правило №7: Онлайн инструменты
Сидите в фотошопе и нарезаете favicon разных размеров? Favicomatic сделает это за вас! Просто загрузите фото вашей иконки в хорошем качестве, выберите нужные вам размеры и ... эврика! Вы получили архив с нарезанными иконками за пару секунд. Это же касается проверки макета на различных расширениях экрана. Начните пользоваться Screenfly и посмотрите как будет выглядеть ваш сайт на разных мониторах и устройствах. Поищите для себя такие сервисы, чтоб у вас все было под рукой.
И напоследок небольшой совет - когда берете работу у заказчика, заложите на нее немного больше времени. Например, если вы верстаете макет за 4 часа, скажите, что вам нужно 6 - вы оставите время на проверку и отдых, а заказчику будет приятно получить работу быстрее, чем ожидалось.
Следуйте этим правилам, и ваша работа с макетами будет проходить намного быстрее и эффективнее!
Еще не сильны в верстке? Тогда добро пожаловать на обучение профессии «Верстальщик» или на бесплатный интенсив «Основы веб-разработки».