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

Вы хорошо верстаете, но на создание одного макета уходит огромное количество времени? Тогда вам стоит прочесть эту статью! Вы узнаете, что такое верстка и как изучить html с нуля, а также разберетесь в принципах быстрой верстки. Хотите еще больше углубиться в тему? Запишитесь на курс FrontEnd разработки или заходите в блог Deveducation!

Что такое быстрая верстка?

  • Использование шаблонов;
  • Создание разметки, а только потом дизайна;
  • Использование пакетных менеджеров;
  • Установка редактора с расширением;
  • Изучение SASS / LESS;
  • Верстка каждой страницы по очереди;
  • Использование специальных инструментов.

Как верстать быстрее обычного?

Создайте специальный шаблон под разные макеты. Для этого подготовьте фреймворк, ключевые файлы с папками и выполните установку важных плагинов. Теперь сохраните заготовку — так верстка сайта пойдет быстрее. Копируйте шаблон в папку с проектом и пишите код. Также вы можете поискать готовые примеры на различных тематических ресурсах.

Не пренебрегайте внимательным изучением макета. Сначала пропишите его структуру в html, подготовьте изображения, а уже затем приступайте к CSS. Помните, что код должен выглядеть грамотно. Это нужно для вашего же удобства. Если понадобится что-то отыскать, а код будет написан очень неряшливо и неразборчиво, вы потеряете время на поиск данных.

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

Выбирайте редакторы с расширенным функционалом. Программы типа Emmet, Hayaku и Live Preview упростят вашу работу, а код будет писаться еще быстрее.

Что еще нужно усвоить?

Чтобы на поиск строк в CSS уходило меньше времени, установите и изучите SASS. Так вы сможете менять одну деталь для всего проекта. Благодаря этому динамическому языку стилей у вас получится подбирать нужные цвета или размеры шрифтов, затрагивая только одну строку.

Лучше не верстать несколько проектов одновременно. Обычно на создание двух проектов сразу уходит больше часов, чем на их последовательную верстку.

Нарезаете в фотошопе favicon? Есть программа, которая все сделает за вас. Как работает Favicomatic? Загрузите фотографию иконки в отличном качестве и укажите размер. Через несколько секунд вы получите архив с нарезанными иконками.

Также вы научитесь правильно оценивать сроки, за которые можете сверстать макет. И сообщайте заказчику цифру на 10-15% больше той, которую вы для себя определили. Таким образом, у вас останется время на проверку и отдых, а проект можно отдать на пару минут раньше, чтобы приятно удивить заказчика.

Оптимизация производительности CSS

Советы по оптимизации CSS:

  • Используйте стенографию;
  • Используйте пробелы с умом;
  • Сокращайте фреймворки;
  • Используйте сжатие.

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

Есть две крайности в стиле форматирования: с большим количеством пробелов и с очень маленьким количеством пробелов. Пробелы, включая табуляции и разрывы строк, важны для читабельности кода CSS. Тем не менее, пробелы добавляют вес странице, пусть даже незначительно.

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

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

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

Несколько приложений для сжатия и оптимизации CSS обслуживают нечитаемые человеком, но удобные для браузера файлы. Обычно они составляют часть исходных рабочих копий. Приложения вроде CSSTidy и YUI Compressor сжимают пробелы, обнаруживают и исправляют свойства CSS, которые перезаписывают друг друга. Также они могут найти возможности для использования сокращений CSS, которые вы, возможно, пропустили. Эти типы приложений — отличные источники для чтения. Они укажут на то, что вы можете делать вручную.

К ним относятся следующие популярные текстовые редакторы:

  • BBEdit
  • TextMate
  • TopStyle

Они помогут отформатировать ваши файлы CSS по своему вкусу. Есть также варианты обслуживания zip-версий ваших файлов CSS с использованием PHP.

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

Чистый и оптимизированный код важен не только для размера файла, но и для обслуживания и удобочитаемости.

Эти принципы быстрой верстки хороши не только для CSS, но и для HTML, JavaScript и других языков программирования. Визуализация веб-сайта для конечного пользователя важнее файлов CSS. А указанные принципы не только сделают интерфейс удобным для пользователя, но и обогатят ваш опыт разработчика. Используйте их в работе над текущими и будущими проектами, и вы обязательно оцените усилия!

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!