Всем привет. Верстаю, использую кучу примочек, но верстка страницы всё равно занимает много времени (три-четыре дня в усиленном темпе на одну страницу средней тяжести). Интересует мнение верстальщиков - что еще можно добавить в инструментарий для ускорения?
Использую:
БЭМ, SASS (сокращения, переменные), Emmet, заготовленный шаблон для старта верстки (с готовой структурой), наработала снипеты (но обычно макеты разные, не всегда помогает), пиксель-перфект вместе с онлайн-хостом-релоадом, перешла на VSCode (отпала надобность в Gulp), вместо ФШ давно Avocode, наработала быструю схему работы (как могла). Думаю еще подключить webstorm для того, чтобы переносить данные из разработчика сразу в код. И всё равно всё остается очень трудоемким. Делаю разметку руками на флексах, пока адаптацию пропишешь для всех экранов - вечность пройдет. Бутстрап - только хуже делает, без него быстрее (да и костыль).
Прошу совета у бывалых. Может есть еще какие-то фишки, о которых я не знаю, которые могут повлиять на скорость верстки? Думаю о кусках кода по типу миксинов. Буду рада любым советам.
Покажите пример средней страницы. Тогда можно будет понять причину проблемы, которая может заключаться именно просто в вашей скорости работы из-за количества опыта, скорости ввода и т. п.
Например, я и мой коллега используем один и тот же набор инструментов, а я всё равно верстаю в два раз быстрее.
Рустам Байназаров, да, простую прописываю, если не сказали как, но это часто делается довольно быстро - буквально две строчки через transition, JS тоже прикручиваю по мелочи, по крайней мере весь интерфейсный скрипт.
Korsia, Три-четыре дня (по 8 часов считаю) на приведенный в качестве примера макет это многовато, как по мне. Максимум часов восемь. На крайняк десять.
Я обычно беру макет, полчасика втыкаю в него под чашечку кофе, прикидываю, как он будет выглядеть в коде. Потом Нарезка графики, всей сразу (потом удобнее автокомплитом быстро вставлять в код готовые изображения).
Далее полная разметка страницы с наполнением, без стилизации, но классы прописываю сразу (обдумал уже за чашкой кофе). Это самая нудная часть работы...
Ну и останется запустить локальный сервачок с лайфрелоадом и написать стили под все это дело. Это самая объемная часть работы, но и самая интересная.
В силу опыта многие стили пишутся на автомате, практически без участия мозга =))
По инструментарию, в принципе, всё то же самое - webstorm, gulp/webpack, два монитора, музыкальный плеер.
Жесть какая то, что я только что прочитал? Просто поток сознания. Перешла на висикод, отпала надобность в галпе. Как связаны между собой редактор кода и таск менеджер?? Зачем нужен вебсторм? Бутстрап костыль? Просто рука лицо. Автор иди поучи матчасть немного, чтобы у тебя каша в голове устаканилась.
А очень просто связаны. Что-то типа галпа вшито в vscode и мне не нужно запускать node, закидывать кучу хлама в папку с проектом и писать команды руками. А достаточно одну кнопку нажать и вуаля, все само компелируется, одна кнопка и локал хост открывается. Вебсторм даёт возможность переносить параметры, которые вы меняете в режиме разработчика, сразу в файл одним кликом, не нужно открывать док и искать параметр. А Бут - костыль и вы меня не переубедите. Он строго привязывает к процентам в колонке, ещё и превращает html в хлам. Когда не было флексов, он был хорошим вариантом, но сейчас я считаю его мертвым грузом для верстальщика. Для прогера - пожалуйста. Так что с матчастью у меня все нормально.
Korsia, с матчастью у вас все очень плохо. Вы не верстальщик, а недоверстальщик. Вы идите и погуглите для начала, что такое галп или вебпак, а то похоже вы, извините, просто как дрессированная мартышка выполняете какие то непонятные вам команды не понимая их смысл. Галп это менеджер рутинных задач, который выполняет любые написанные вами таски, от пост сиэсэс до сборки и заливки на хостинг. Это как сказать, у меня есть шапка, мне магазин одежды не нужен и ничего, что у вас зад голый? Если бы вы были верстальщиком и немного в теме, то знали бы что в бутстрапе 4 уже давно сетка на флексбоксах. Изначально, с момента выхода. Давно, это чтобы вам было понятно года три. Где вы все это время пропадали? В хлам я боюсь, что html превращаете вы с таким отношением, вы по какой методологии работаете, может и бэм для вас хлам? Как можно строго привязывать к процентам, вы о чем вообще? Вы понимаете вообще, что такое сетка и для чего она? А про кастомизацию сборки бутстрапа слышали? Любой инструмент расчитан под свои задачи, если вы не умеете использовать его это не значит, что он плох. Фреймворки, в том числе и бутстрап берут на себя множество опять же рутинных задач. Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей.
Уф, ну вы и зануда))) Вы всегда девушкам хамите, или это только мне сегодня повезло?
Я верстала на 4м Буте и не раз, знаю, из чего он состоит. Про кастомизацию тоже знаю. Ничего нового вы мне не рассказали, только вопрос зафлудили.
Korsia, почему вы пытаетесь прикрыться гендером? Вроде бы профессия никак с этим не связана. Верстали на 4 бутстрапе много раз, но не вкурсе, что он на флексах. У вас очень аргументированные ответы. Исходя из них, я и рекомендую вам освоить теорию, чтобы как вы выразились не делать адаптацию для всех экранов руками. Именно для этого и используются сетки.
Это всё нужно исключительно для того чтобы это всё готовое использовать в админках или в... других админках. В любом другом +- аутентичном дизайне в 99% случаев из бутстрапа берётся только сетка.
Сергей, ну модальники тоже можно взять к примеру, если нет особых требований, не самому же из писать. Или карусель, если лень ставить какой нибудь слайдер и тоже нет особых эффектов. Если в проекте используем jquery есественно. Сетка мне больше нравится у codyhouse framework, я ее использую, где есть возможность.
Vaultboy84, особых требований нет у программиста, у которого задача - реализовать свою функциональность, используя готовые css-компоненты, не отвлекаясь на написание css-кода. У верстальщика же в подавляющем большинстве случаев требования к верстке особые. Иначе, зачем он вообще тогда нужен.
Jack_Rabbit, да речь то не про бутстрап, а про то, что автор непонимает смысла инструментов, которые использует. Бутстрап костыль, бэм потому что модное слово, галп вшит в висикод. Автору говоришь, что он чушь пишет, а он спорит.
Vaultboy84,мне нравятся ваши выводы. Я прекрасно знаю, что Бут 4 на флексах, я как минимум спецификацию к нему читала, а как максимум там все позиционирование выстроено на флексах с соответствующими классами. Про Галп я образно вам рассказываю, что в vscode есть тот же набор функций, который я использую через галп, и мне с ним проще, но вы прикопались что якобы я не знаю, что это. Вы серьезно думаете, что нормальный верстальщик может не разбираться в инструментах, с которыми работает? Он тогда не может ими нормально пользоваться.
Vaultboy84 Какой-то странный ты...
Сначала расписывал какой бутстрап хороший инструмент, потом Jack_Rabbit объяснил почему это не так и ты сразу "да речь то не про бутстрап", а про что? И не надо говорить что кто-то чего-то не понимает, имхо, в данной ситуации ты не понимаешь...
Какие к чёрту "Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей"? Есть хорошие плагины для всего этого или это пишется всё руками. Ты не в состоянии инпут стилизовать руками? Тебе для этого нужен бутстрап? Если это так, то это тебе нужно учить матчасть.
Единственное, что меня удивило, что автор от галпа отказалась, но видимо галп использовался для совсем лёгких задач, что плагины в vscode смогли его заменить.
IIIu6ko, да, в принципе так и есть, с компиляцией, лайвсервером, спрайтами и прочими мелочами vscode справляется, что-то страшное я на нем не делаю. Если бы делала, думаю, вопрос, который я задала, не особо бы стоял, это уже другой уровень в профессии.
IIIu6ko, ну наверное даже такой идиот, как ты должен понимать, что каждый инструмент хорош для своих задач. Автор написал, что бутстрап это костыль, а я ответил, что это инструмент. Что ты тут вылез и что хочешь сказать абсолютно не понятно. Не поверишь но во многих админках, интерфейсы которых внезапно тоже верстают, часто используется дефолтный дизайн бутстрапа для скорости разработки. К тому же зачем мне ставить какие то специальные плагины. Из перечисленного, переменные для стилей это удобно, зачем их создавать по новой, когда они уже есть, сетка в бутстрапе вполне себе юзабельная, модальные окна не то, что плагин, я сам могу написать, но вопрос зачем, если они есть из коробки с разметкой уже готовой, слайдеры я юзаю все топовые и slick и owl и swiper, но если обычная карусель, зачем мне городить огород, тултипы тоже самое, можно написать, можно скачать плагин, иногда достаточно тех что есть по дефолту в бутстрапе. Остаются инпуты на которые ты перевозбудился. Ну и собственно в чем суть твоего месседжа? С твоими вопросами тут на тостере про то как скрыть бордер у предыдущего элемента и г*внокодингом на джс с var в 2018 году уж точно не стоит кукарекать про матчасть.
Vaultboy84, автор написал, что бутстрап - костыль для нетипичной верстки и всё еще на этом стоит. Если мне нарисуют дизайн, состоящий из типичных бутовых кнопочек и формочек, то всегда пожалуйста, с удовольствием сокращу себе время на верстке.
Korsia, это исключительно ваши проблемы, что вы не понимаете, как работают сетки, а так же не понимаете, что у бутстрапа существует компонентный подход и вы берете, что вам нужно в конкретной задаче: только сетку, сетку и какие то скрипты или не берете ничего и не используете вообще. Если вам нужно забить гвоздь не обязательно для этого брать монтировку, лучше взять молоток, но это не значит что монитровка - костыль для забивания гвоздей, это значит что вы идиот не способный выбрать правильный инструмент.
Вы думаете они использовали ради обычной верстки столько вещей? У них был макет, редактор/ide и гугл.
Да и советую вам использовать "технику":
получили итоговый дизайн, возьмите и наглядно определите для себя прототипы (количество блоков, вложенности и прочее) потом от общего переходите к частному. Если ради скорости(упуская качество кода) то используйте готовые css/js либы.
Но лично я делаю как выше описал и в последнее время по минимуму использую либы.
Сначала фасткодинг, а потом уже чистка кода, правка багов
получили итоговый дизайн, возьмите и наглядно определите для себя прототипы (количество блоков, вложенности и прочее) потом от общего переходите к частному.
Я делаю именно так в работе. Сначала продумываю структуру, потом только берусь верстать. За счёт sass+бэм просто копирую стили для повторяющихся элементов кода и вставляю. Больше повернута на качестве, потому медленная скорость раздражает.
Это актуально, если макет "без претензий". Если с выподвывертом, то библиотеки не прокатывают. Ну или я не понимаю, о чем Вы. Что-то типа wow.js, animate.css и прочее? Они не сильно то время экономят. Сильней всего css отжирает время и позиционирование блоков.
За счёт sass+бэм просто копирую стили для повторяющихся элементов кода и вставляю
эм, БЭМ подразумевает что вы не будете дублировать код. тут пример
А как вы сетку пишете? Каждый раз заново и для всех разрешений?
Миксины сами собой еще никакие не образовались?
У меня за первые 10 макетов уже была тележка миксинов(потом они подрезались)
Andrew, БЭМ подразумевает, что я не дублирую код в html. В css дублирую код. Сейчас покажу, как это выглядит.
У меня все блоки имеют стандартизированые названия. Допустим, main-header__description, main-footer__description, services__list, about__list, main-header__title, main-footer__title. И если в разных section есть одинаковые элементы по стилям, то они чаще всего носят одинаковые названия за исключением названия раздела. Я просто в sass копирую весь код начиная с апперсанта &__list/&__title (и т.д.) и переношу его в нужный раздел. Это классическая связка БЭМ+Sass.
Сетка на всех макетах разная, приходится по новой писать, да. Я миксины пока заменяю переменными. Но планирую ввести.
Брэйкпоинты и контейнеры теже, нет? - поменяли 1 переменную и в бой.
Ну конечно те же. По большей части брейки одни и те же, контейнер бывает разный, в основном 1170 под бут. Ну так это же по сути не сетка. Сетка - выстраиваемость блоков, по крайней мере в моем понимании. А она везде разная.
Денис, теоретически да, пишешь им два класса, общий и основной. Но мне так проще и быстрее, потому что часто бывает, что стили одинаковы, но у одного - падинг меньше и черточка, а у другого цвет другой. Мне быстрее скопировать и разницу поменять тут же, чем перебивать ее доп. стилями.
Korsia,
А потом вам заказчик говорит " милочка, а сделай-ка мне у заголовка шрифт не 20, а 25" И вы 15 раз в 15 разных местах меняете размер шрифта, вместо того, чтобы поменять это в одном месте.
Все повторяющиеся стили - в один блок, все различающиеся правятся миксами или модификаторами. По БЭМу код не должен дублироваться ни в хтмл, ни стилях
Денис, у Вас были такие случаи? Я вначале всё добросовестно выносила в переменные, добавляла общие классы потому что "а вдруг заказчик захочет все "___" сделать такими-то". И знаете, сколько раз мне это пригодилось? Правильно, 0. А трудозатрат больше. От того, как я делаю, общая логичность кода не меняется, только стоит угроза менять 7-8 раз одну строку в коде вместо 1го. И пока эта угроза ни разу не подтвердилась.
Все повторяющиеся стили - в один блок, все различающиеся правятся миксами или модификаторами
Верстка сильно быстро отучает быть во всём правильным и дотошным)) Потому что по большей части это никому не нужно.
А как долго у вас на поддержке висят сайты?
Просто если вы верстаете и сдаете работу, не возвращаясь к ней больше, у вас ничего подобного и не произойдет.
Ну вы поняли господа уровень упоротости. Бэм это тупо красивое слово в данном случае у барышни)) стандартная связка сасс и бэм, ахах)) ну а тот кто будет это все поддерживать дальше очень сильно порадуется. А как вам пассаж про то что сетка это выстраиваемость блоков, а она везде разная))
теоретически да, пишешь им два класса, общий и основной. Но мне так проще и быстрее, потому что часто бывает, что стили одинаковы, но у одного - падинг меньше и черточка, а у другого цвет другой.
Это ты щас описала миксы, когда два класса смешиваются (.title.section__title), но в случаи, который ты описала выше можно ещё использовать и модификаторы. Ничего не придётся копировать в css, просто пишем <div class="block block--color">
и в css меняем цвет, аналогично для отступов, но для отступов лучше всё-таки миксы, да.
Это правильная методика, которая не просто так была придумана. Весь смысл БЭМа теряется, если не реиспользовать стили.
IIIu6ko я в принципе, по работе уже пришла к тому, что мне тут пару товарищей втолковало)) Так что всем ребятам спасибо за советы.
Модификаторы я использую внутри одной section чаще всего, когда есть один блок и его вариации. Миксы, наоборот, для похожих элементов в разных секциях. Так мне потом легче читать разметку.
Написано
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.