Как вы верстаете?

Question

[Silence]

Настроил себе стартовый темплейт с минификацией, спрайтами, проверкой кода и т.д На codepen себе понемногу пишу компоненты различные, как в css фреймворках. Как у вас устроен рабочий процесс?
Верстаете все сами, по необходимости какие то компоненты может прикрутить, например slick, magnificPopup или берете компоненты из фреймворка, например из бутстрапа, но без сеток, стилей. Готовые компоненты забиваете на сниппеты и во время верстки вставляете?
Как то не хочется брать весь фреймворк, потому что сетку сам могу написать, адаптивность через миксины пишу, вот стало интересно как основные компоненты пишите, чтобы не с нуля каждый раз.

Comments

[be_a_man]

У меня сборщик Gulp + Webpack. HTML шаблонизатор nunjucks. Одно время разбивал все на компоненты в папке Components лежали готовые блоки, например, преимущества в 3 колонки, шапка такая-то, шапка другая. В итоге это все разрослось, что сам начал там путаться. Если грамотнее все организовать, наверное можно довести до ума такой подход. Но я забил и дергаю то что уже делал с предыдущих проектов.

Answer 1

[MasterMike]

Как, как. Берем и верстаем )

Вы подняли вопрос возможности переиспользования кода в разных проектах.
На мой взгляд, вещь довольно трудновыполнимая на практике.

Comments

[itsjustmypage]

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

Модальное окно, как бы оно не выглядело, как бы не анимировалось и как бы не заполнялось, всегда остаётся модальным окном. То есть имеет кнопку закрытия, фиксированное позиционирование, оверлей, отмену скроллинга, состояния (открыто/закрыто), необходимую доступность (WAI ARIA состояния, роли, свойства) и так далее.

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

Неужели вы помните все необходимые детали при вёрстке конкретных компонентов и каждый раз делаете это с нуля?

[MasterMike]

itsjustmypage, согласен, вы перечислили практически все компоненты, переиспользуемость которых при верстке можно хоть как-то автоматизировать.

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

Answer 2

[antimodern]

На codepen себе понемногу пишу компоненты различные, как в css фреймворках.

:O

по необходимости какие то компоненты может прикрутить, например slick, magnificPopup

нет

или берете компоненты из фреймворка, например из бутстрапа, но без сеток, стилей

нет

Готовые компоненты забиваете на сниппеты и во время верстки вставляете?

нет

адаптивность через миксины пишу

што?

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

Легко. Создаешь файл Slider.vue и используешь его во всех будущих проектах))
Для продвинутых можно (и нужно) сделать рендерлесс (или функциональный компонент как в Реакте), тогда вся логика в SliderWrapper.vue, а слоты в SliderItem.vue и вообще никаких стилей/анимаций, которые потом можно менять от проекта к проекту.

Comments

[Decadal]

>Slider.vue

а каким боком vue к верстке? А если проект не на vue тогда переводишь его на vue, да?
господи, когда уже дизлайки добавят

[antimodern]

Decadal, человек спросил как мы пишем компоненты, я ответил (потому что то что он описывает это НЕ компоненты). Хватит завидовать, иди учись.

[Decadal]

antimodern, так было бы чему завидовать. Вы увидели слово "компонент", ага, слыхал о таком, пойду напишу ответ. То что вопрос звучит "как вы верстаете" в вашей бинарной логике как-то не учитывалось.

[Decadal]

antimodern, взаимосвязанные вещи это не равнозначные вещи. Бекенд и фронтенд тоже взаимосвязан но когда задают вопрос по фронту глупо его объяснять с точки зрения бекенда.

Что за чухню ты сейчас пытаешся донести. я не пойму?

не перенапрягайтесь. Все хорошо.

[antimodern]

Decadal, ага. А, значит упомянутые slick, magnificPopup это равнзначные верстке вещи? И тот факт что можно сделать слайдер компонентом самостоятельно для тебя секрет? И это будет реальный переносимый компонент, а не то говно, что делает автор из сниппетов CSS и прочих огрызков JS))

[Decadal]

antimodern, да нет, не секрет. Будем кратки - мне ваш ответ не помог, извините.

[Decadal]

И это будет реальный переносимый компонент, а не то говно, что делает автор из сниппетов CSS и прочих огрызков JS))

окей, эти слова мне полезны.

[antimodern]

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

[Decadal]

antimodern, так вы всем отвечали, тут публичная площадка.

Я вам пояснил взаимосвязь, самую прямую.

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

[Silence]

antimodern, в документации фреймворков css под разделом components различные табы, модалки и прочее, поэтому так озаглавил. Понятно, что я не имел в виду компоненты, которые пишут на фронтэнд фреймворках.

[antimodern]

Decadal,

Верстка не должна быть жестко связана с каким-либо фреймворком на js, чтобы не тянуть лишние зависимости

Подождите-ка! ТС сам только что описал кучу зависимостей в виде CSS фреймворков, Буцтрапов, slick, magnificPopup. Это что не жесткая привязка? А у меня - ВНЕЗАПНО - 0 CSS фреймворков и 0 слайдеров)) Одна зависимсть - Вью. Жесткая, аж на 21kb))

[Decadal]

antimodern, это лирика. Бутстрап нужен чтобы отстроить сетку, короче создать среду в которой будет накатываться верстка. css-зависимости неизбежны. А ваше vue для одного компонента это так себе. Прибежит потом Иван с Ангуряром и Толян с реактом и будут потом плеваться типа "ооо а что это ваши верстальщики тут наподключали.."
озвучу на всякий случай - я склонен различать верстку и фронтенд разработку. Верстка есть воплощение макета в разметке. Фронтенд есть создание сложной инфраструктуры, программирование поведения элементов, хранение состояний, общение с сервером и обработка серверных ответов. Да, часто фронт и верстку делает один и тот же человек. Ради экономии.
Как минимум в нашей компании это не так. У нас отдельно FED и отдельно UI\UX

[antimodern]

Silence, не имеет значение, суть одна и та же. Разница только в реализации. Вью (а точнее single file component) это только один из вариантов реализации концепции компонентов. Есть масса других. Из последних Stencil (говорят особо хорош как раз для простых проектов) - https://stenciljs.com/

Ты спросил

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

я ответил

Decadal,

Бутстрап нужен чтобы отстроить сетку

Я даже не знаю что после такого заявления вам отвечать. Пожалуй, откланяюсь.

[Decadal]

>Я даже не знаю что после такого заявления вам отвечать. Пожалуй, откланяюсь.

вы могли не утруждать себя с самого начала.

[Silence]

antimodern, та чувак, смысл отвечать в отрыве от контекста, лишь по слову компонент. Или ты цепная собака, которая при виде слова компонент срывается и тебя уже не остановить. Вопрос явно был насчет оформительских "компонентов", а не функциональных блоков где связанные данные. Я же не против vue, классный небольшой фреймворк. Просто зачем писать такой комментарий на пол страницы лишь бы.

[antimodern]

Silence, иди учись, "собака")))
И мысли учись выражать. Пишешь как школьник какой0то.

Answer 3

[Heorhii]

Делаю следующим образом - забираю что мне нужно с фм с помощью SASS
Что-то проще переписать малёк, что-то заменить, опять же - зависит строго от проекта. Была у меня парочка инет-магазов, и там все средства хороши, задача выполнена пм доволен. Трудоёмкие "фичи" стараюсь выдирать, всё что хорошо было сделано в будущем понадобиться. Короче говоря всё опционально. Есть основания полагать что мего-сайтоделкины имеют за плечами сколько опыта что и сами не в силе все припомнить, и весь процесс написания кода или верстки сводиться к его поискам в старых проектах)

Answer 4

[Fierfoxik]

Все всегда зависит от задач и времени.

Если времени мало или в проекте куча разрабов то юзается фреймворк или частично используется он.
Если это простой лединг, то проще конечно самому все нафигачить а какие то вещи типо слайдера просто прикрутить.

Еще как вариант люди разрабатывают много - используемые ui компоненты. Вставляют проекте где надо в проекте и все.

Answer 5

[tseries Task]

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

Answer 6

[EYPPNM]

Переиспользование блоков достигается путём использования БЭМ подхода