{"draftJsState":{"blocks":[{"data":{"image":{"id":"5e7977e7347d505555849add"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"10pdt"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"9v6gp"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":7,"offset":26}],"inlineStyleRanges":[],"text":" Недавно я воспользовался Webflow, чтобы сгенерировать большую часть HTML и CSS кода, предназначенного для главной страницы. Закончив, я понял, что с помощью данного инструмента смогу написать намного больше качественного кода за определенное количество времени, чем обычно.","type":"unstyled","key":"cpgef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье я бы хотел рассказать вам о Webflow, о том, почему с недавних пор он является моим основным инструментом для написания HTML и CSS кода, и о некоторых вещах, на которые стоит обратить внимание, если вы решите пойти по моим стопам.","type":"unstyled","key":"3li3k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Что такое Webflow?","type":"header-two","key":"69k6j"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":7,"offset":0}],"inlineStyleRanges":[],"text":"Webflow — это, по сути, пользовательский интерфейс для написания HTML и CSS кода. Интерфейс предоставляет пользователю типичный набор элементов для разметки HTML и панель управления самыми распространенными CSS-свойствами. ","type":"unstyled","key":"8f5jh"},{"data":{"image":{"id":"5e797803ad61ef25d19bfd2d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"The Webflow Designer","type":"atomic:image","key":"brv8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Впрочем, вы можете перетаскивать элементы в любом направлении и играть с панелью управления, как вам захочется, чтобы создать абсолютно любой макет даже без знания HTML и CSS. Но, на мой взгляд, Webflow показывает свою полную силу именно тогда, когда вы знаете как работают HTML и CSS в тандеме. ","type":"unstyled","key":"d4kp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В Webflow присутствует функция экспорта кода, позволяющая экспортировать код, который вы «пишете», по мере его использования.","type":"unstyled","key":"faksp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К примеру, если я создам следующий макет:","type":"unstyled","key":"3d6sc"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":39,"offset":0},{"key":4,"length":14,"offset":45},{"key":5,"length":5,"offset":63}],"inlineStyleRanges":[],"text":"Screen Recording 2019-04-11 at 17.28.35 from Aaron Thompson on Vimeo.","type":"unstyled","key":"f81e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он будет эквивалентен тому, если бы я написал нижеприведенный код:","type":"unstyled","key":"3j669"},{"data":{"image":{"id":"5e797821b489d73ea5ce91a5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9cu65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И вы можете наблюдать, что как только я захожу во вкладку “Export Code”, генерируется точно такой же код, что я написал выше. (Обратите внимание, я добавил класс .heading, но об этом немного позже)","type":"unstyled","key":"flhpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя в примере не так заметно, но, поскольку ваши макеты становятся более сложными, перетаскивание элементов и нажатие различных кнопок — куда более быстрый вариант, нежели ввод текста. Благодаря панели управления, такой способ оказывается в разы быстрее и визуально гораздо понятнее. Вот почему на данный момент Webflow — это мой инструмент номер один для «написания» большей части HTML и CSS кода.","type":"unstyled","key":"bq5hs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Мой процесс работы","type":"header-two","key":"bjp77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одна из опасностей использования Webflow заключается в том, что, если вы не будете осторожны, можно получить код, содержащий тонну элементов div со слишком большим количеством имен классов. Это может привести к тому, что ваш код будет раздутым, несемантическим и с, так называемым, принципом “WET”(принцип в программировании, который означает “пиши все дважды”, противоположный этому принцип “DRY” означает “не повторяйся ”). Если вы при переходе к стилю элемента в Webflow не дадите ему имя класса, Webflow автоматически присвоит ему имя и применит стиль к имени класса, а не к самому элементу. Помните класс .heading, который я создал ранее? Если бы я не сделал этого, Webflow создал бы его автоматически, вместо применения стиля к

.","type":"unstyled","key":"57aji"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":14,"offset":64}],"inlineStyleRanges":[],"text":"Чтобы избежать этого, нужно начинать проект в Webflow с учетом “лучших практик”. Первое, что я делаю в любом Webflow-проекте — это применяю свои базовые стили к “Style Guide”.","type":"unstyled","key":"26ld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начните применять стили к “Style Guide” на отдельной странице, например:","type":"unstyled","key":"95j2d"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":39,"offset":0},{"key":8,"length":14,"offset":45},{"key":9,"length":5,"offset":63}],"inlineStyleRanges":[],"text":"Screen Recording 2019-04-11 at 17.56.43 from Aaron Thompson on Vimeo.","type":"unstyled","key":"emdfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете задать все глобальные и повторно используемые стили для своего сайта. Таким образом, каждый раз, когда вы перетаскиваете элемент (скажем,

CamelCase"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}