Топ-5 ошибок начинающих Webflow-разработчиков

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

Если вам интересна тема ноу-код разработки сайтов и создание сайтов на Webflow, приглашаю в свой канал в Telegram. Там я активно делюсь лайфхаками и советами по созданию ноу-код проектов, а также учу зарабатывать на своих навыках на Upwork.

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

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

Использование дивблока вместо контейнера рекомендуется в Webflow по следующим причинам:

Красный класс — это не просто глобальный класс, это стиль, который мы задаем определенному семантическому тегу. Например H1-H6, Links, paragraph, body. По семантике, например, у нас может быть всего 1 заголовок с тегом H1, а дизайнер предоставил макет, где на 1 странице таких заголовков 10. Это не значит, что дизайнер дурак. Это значит, что мы добавляем всего семантический тег H1 (именно тегу добавляются свойства из красного класса), а остальные заголовки мы делаем с тегом H2/Н3/текстовый блок, но с обычным синим классом H1. Еще из примеров: на какой нибудь странице у нас может быть тег H1 с синим классом paragraph.

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

Важный нюанс при стилизации красных классов: возвращаясь к примеру, где дизайнер нам предоставил макет, где 10 заголовков H1. Важно, чтобы синий класс по стилям полностью дублировал красный класс. А важно это потому, что иначе при добавлении синего класса H1 на обычный текстовый элемент, он не будет похож на то, что задано в макете.

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

Представим ситуацию: мы верстаем сайт и сталкиваемся с несколькими одинаковыми по стилям элементами. Чтобы ускорить разработку и дальнейшее изменение дизайна, надо называть элементы одинаково. В противном случае надо переделывать стили на каждом элементе вручную и с большей долей вероятности есть риск что-либо забыть поменять. Эта большая вероятность существует даже при наличии всего 2-3 одинаковых элементов, но с разными классами. А если таких элементов 213?

Не обязательно оборачивать каждый текст в дивблок. Дивблок используется для группирования блоков контента. Текстовый блок является самостоятельным элементом и не требует специальной обработки (за исключением верстки в ЕМ).

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

Padding и Margin используются для создания пространства вокруг элементов, но они служат разным целям.

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

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

Паддинги используются, как правило, для отступов между неравнозначными элементами: от внешнего к внутреннему, от родительского элемента к дочернему. Равно как строительство лифта: сначала строится шахта лифта, а затем от нее делаются отступы вовнутрь и ставится лифтовая кабина. Но никак не наоборот. Марджины зачастую используются между равнозначными элементами (братьями/сестрами), которые стоят на одном уровне.

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

Теперь представим, что у вас есть несколько коробок, которые мы хотим расставить на полке. Марджины — это как расстояние между коробками на полке. Они помогают коробкам не касаться друг друга, создавая пространство между ними.

Итак, используйте паддинги, когда хотите, чтобы содержимое внутри вашего элемента (как вещи в коробке) имело больше места. А марджины используйте, когда нужно отделить ваш элемент (как коробку) от других вещей или элементов рядом.

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

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