7 правил быстрой верстки

7 правил быстрой верстки

Автор: Александр Гришин 11 Августа 2017 79

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

html-5-css-3.jpg 

Правило № 1: пользуйтесь заготовками

Сделайте одну заготовку для всех макетов. Создайте свой фреймворк, упорядочьте папки и файлы, установите необходимые плагины (Bootstrap, jQuery и т. д). Сохраните и используйте свою заготовку для верстки: просто перенесите папку с вашим проектом и приступайте к написанию кода! Это поможет значительно ускорить работу и снизить трудозатраты. 
P. S. Кстати, на GitHub уже существуют готовые заготовки для верстки от юзера Agragregra (https://github.com/agragregra/start_html), которые можно использовать для своих целей.

Правило № 2: сначала размечайте, потом приступайте к дизайну

Изучите внимательно макет, напишите структуру HTML, нарежьте изображения и только после этих шагов приступайте к CSS. Грамотность кода – основное, о чем надо помнить. Если вам понадобится что-то быстро найти, а написанный код похож на лес беспробельных символов и отступов, сориентироваться и оперативно заменить данные будет крайне сложно.

Правило № 3: пользуйтесь пакетными менеджерами

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

Правило № 4: найдите удобный редактор кода и установите расширения к нему

Все еще пишете код в блокноте и по сто раз на дню указываете border-radius, position: relative и  т. д.? А ведь существует возможность  написать просто br, нажать Tab и получить полноценный border-radius (так, например, работает Emmet в Sublime Text). Экономит много времени и сил, согласитесь? Найдите и скачайте себе подходящую программу для написания и редактирования кода, поставьте расширения для нее. Если вы еще не знакомы ни с тем, ни с другим – самое время узнать о них побольше.
P. S. В качестве стартового скачка можете обратить внимание на программы Sublime, Brackets, а в качестве плагинов рассмотреть Emmet, Hayaku, Live Preview и т. д.

Правило № 5: изучите SASS и LESS

У вас уходит слишком много времени на поиск нужных строк в CSS? Установите SASS и меняйте необходимую переменную для всего проекта сразу! Вы сможете изменять и задавать новые параметры цвета, размер шрифта и другие свойства, затронув только одну строку!

Правило № 6: не совмещайте верстку и многозадачность

Не старайтесь верстать несколько проектов единовременно! Решив работать над двумя проектами сразу, вы потратите гораздо больше времени, чем при верстке по отдельности. Рано или поздно глаз «замылится», вы начнете путаться в файлах и коде, а это повлечет за собой ошибки и необходимость их исправлять.

Правило № 7: используйте онлайн-инструменты

Все еще нарезаете favicon разных размеров с помощью фотошопа? А вот, например, Favicomatic может сделать это за вас! Загрузите хорошее фото вашей иконки, задайте необходимые размеры и… бинго! Как результат: готовый архив с нарезанными иконками за несколько секунд. То же самое касается и проверки макета на разных форматах экрана. Опробуйте Screenfly и посмотрите, как ваш проект будет выглядеть на разных устройствах и экранах. Такие сервисы значительно облегчают жизнь кодера-верстальщика и всегда находятся под рукой.
Бонус. Ну и напоследок скорее даже совет, нежели правило. По возможности всегда закладывайте на проект больше времени, чем вам нужно, когда берете заказ в работу. Если вы уверены, что сверстаете макет за 4 часа, все равно скажите, что нужно 6. Таким образом, вы оставите себе время на передышки и конечную проверку, а заказчик будет приятно удивлен, получив работу раньше, чем оговаривалось. Даже если сдать раньше и не получится, ни один заказчик еще не был огорчен получением работы в срок J

comments powered by HyperComments

Вернуться к списку