Web Development

Недавно я воспользовался Webflow, чтобы сгенерировать большую часть HTML и CSS кода, предназначенного для главной страницы. Закончив, я понял, что с помощью данного инструмента смогу написать намного больше качественного кода за определенное количество времени, чем обычно.

В этой статье я бы хотел рассказать вам о Webflow, о том, почему с недавних пор он является моим основным инструментом для написания HTML и CSS кода, и о некоторых вещах, на которые стоит обратить внимание, если вы решите пойти по моим стопам.

Skillbox

Что такое Webflow?

Webflow — это, по сути, пользовательский интерфейс для написания HTML и CSS кода. Интерфейс предоставляет пользователю типичный набор элементов для разметки HTML и панель управления самыми распространенными CSS-свойствами. 

The Webflow Designer

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

В Webflow присутствует функция экспорта кода, позволяющая экспортировать код, который вы «пишете», по мере его использования.

К примеру, если я создам следующий макет:

Screen Recording 2019-04-11 at 17.28.35 from Aaron Thompson on Vimeo.

Он будет эквивалентен тому, если бы я написал нижеприведенный код:

HTML
<h2 class=”heading”>Heading</h2>

CSS
.heading {
 color: #fa0505;
}

И вы можете наблюдать, что как только я захожу во вкладку “Export Code”, генерируется точно такой же код, что я написал выше. (Обратите внимание, я добавил класс .heading, но об этом немного позже)

Хотя в примере не так заметно, но, поскольку ваши макеты становятся более сложными, перетаскивание элементов и нажатие различных кнопок — куда более быстрый вариант, нежели ввод текста. Благодаря панели управления, такой способ оказывается в разы быстрее и визуально гораздо понятнее. Вот почему на данный момент Webflow — это мой инструмент номер один для «написания» большей части HTML и CSS кода.

Мой процесс работы

Одна из опасностей использования Webflow заключается в том, что, если вы не будете осторожны, можно получить код, содержащий тонну элементов div со слишком большим количеством имен классов. Это может привести к тому, что ваш код будет раздутым, несемантическим и с, так называемым, принципом “WET”(принцип в программировании, который означает “пиши все дважды”, противоположный этому принцип “DRY” означает “не повторяйся ”). Если вы при переходе к стилю элемента в Webflow не дадите ему имя класса, Webflow автоматически присвоит ему имя и применит стиль к имени класса, а не к самому элементу. Помните класс .heading, который я создал ранее? Если бы я не сделал этого, Webflow создал бы его автоматически, вместо применения стиля к <h2>.

Чтобы избежать этого, нужно начинать проект в Webflow с учетом “лучших практик”. Первое, что я делаю в любом Webflow-проекте — это применяю свои базовые стили к “Style Guide”.

Начните применять стили к “Style Guide” на отдельной странице, например:

Screen Recording 2019-04-11 at 17.56.43 from Aaron Thompson on Vimeo.

Вы можете задать все глобальные и повторно используемые стили для своего сайта. Таким образом, каждый раз, когда вы перетаскиваете элемент (скажем, <h1>, <p> или <a>) в конструктор, он будет предварительно стилизован в соответствии с вашим “Style Guide”, и вам не придется создавать дополнительные классы, чтобы стилизовать базовые элементы.

Закончив работать над своей “Style Guide” страницей, я экспортировал код, чтобы сгенерировать глобальные и повторно используемые стили в своем CSS. 

exported style guide

Прежде чем двигаться дальше, давайте быстренько рассмотрим, как выглядит экспортированный код.

При экспорте кода из Webflow, вы получаете .zip-файл, содержащий:

  1. index.html;
  2. style-guide.html;
  3. таблицу стилей вашего проекта (your-project.css) —в настоящее время заполнена нашими глобальными стилями;
  4. normalize.css;
  5. webflow.css.

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

webflow.css содержит все стили для предварительно созданных Webflow-компонентов, таких как “навигационные панели”, “формы” и “кнопки”, и если вы не использовали данные компоненты в своем проекте, тогда вам и не потребуется ни один из стилей в этом файле.

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

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

5 советов для написания хорошего кода в Webflow

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

1. Всегда используйте Style Guide

Как я уже говорил выше, использование “Style Guide” сохранит принцип “DRY” в CSS.

2. Пишите имена классов через дефис

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

3. Сделайте свой HTML более семантическим 

В Webflow предусмотрены отдельные элементы «Section» и «Div», но при экспорте кода разделы экспортируются не как теги <section>, а как теги <div> с любым именем класса, которое вы указали. Чтобы сделать ваш HTML-код более семантическим, обязательно замените соответствующие div’ы на более семантические HTML-элементы. Например, на теги <section>, <header> и <footer>. 

4. Используйте только тот код, который вам нужен

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

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

5. Добавьте комментарии

В заключение, обязательно прокомментируйте экспортированный код. Например, вы можете добавить CSS-комментарии к разделу таблицы стилей, а HTML-комментарии — к закрывающим тегам </div>.

Перевод статьи Aaron Thompson: How to Write Good HTML & CSS with Webflow