Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!
Подскажите что лучше изучать CSS Grid, bootstrap или flexbox?
Какая из технологий более живучая , более продуктивнее и более востребованная на Ваш взгляд
Я изучил основы СSS, HTML, затронул jQuery.
Теперь стал вопрос в адаптивном использовании блоков при написании сайта
Привет!
В 2019 году нетрудно запутаться в различных технологиях и их применяемости в данный момент. Давай попробуем рассмотреть вопрос немного подробней.
Для начинающего разработчика, который только изучил основы HTML, CSS и затронул jQuery — я бы посоветовал продолжить изучение основ CSS. Учитывая что Grid/Flex как раз являются частью этих основ — точно стоит сконцентрироваться на них для комфортного старта.
Grid позволит тебе строить общую структуру страницы, располагать блоки контента на ней и делать какой-то более менее статичный каркас. Флекс отлично подходит для адаптивной верстки и всего что связано с разными размерами экрана.
Вот неплохая статья, коротко и доступно очерчивающая возможности flex/grid, их сравнение и pros/cons.
hackernoon.com/...d-vs-flexbox-d40da0449faf
В свою очередь, я работаю в mate.academy и мы неплохо знаем специфику рынка. Опыт трудоустройства ребят на должность junior developer говорит нам о том, что в 2019 году одним из базовых и важных пунктов в CV разработчика является именно CSS. Все меньше вакансий с bootstrap можно сейчас найти, и в большинстве вакансий требуется умение адаптивной верстки которое как раз с помощью flex/grid можно и получить.
К тому же, освоив css, освоить bootstrap за короткий промежуток времени тебе не составит никакого труда. Надеюсь ответ был полезен.
Успехов в изучении, да прибудет с тобой сила!
Но ведь это топик 2017 года, а не
Сергей, разве ты не видиш что ето боты этих говно курсов везде рекламируют свою академию, как бы давая советы...
Оно выглядит и работает как антиреклама, какая-то, странно, что сами себе делают ее, и имидж себе делают соответствующий.
Ты ж замечал, они в кучу топиков своих експертных советов накидали рекламируя в добавок очередную говно недо академию
Лучше бы сделали отдельный проект или сайт для начинающих,
подобно тому, как Projector сделали сайт telegraf.design
Спасибо за ссылку, найс ресурс
Сергей, я не вижу ничего анти-имиджевого в помощи другим в топиках, которые не были полностью раскрыты. Не смотря на то что пост 2017 года — в него может заходить еще много людей которые до сих пор не нашли ответ на этот вопрос. Думаю форумы и созданы для ответов на вопросы.
Появление комментариев в этом и других старых топиках и одновременное внезапное появление множества лайков у этих комментариев не выглядит как общение обычных разработчиков, больше похоже на странную PR-кампанию.
Сергей, full-disclosure: Помогать людям лучше разбираться в вещах, в которых им трудно разобраться самостоятельно — моя работа. И если я на каком-то форуме кому-то ответил, и в своем ответе использовал знания, полученные на работе — не считаю чем-то плохим что компания в которой я работаю будет указана в качестве источника знаний. Вижу в этом только позитив, все в выигрыше.
Джун у которого даже года опыта нету судя по линкедину и уровню кода на гитхабе собирается учить других или учит... facepalm
Вместе с десятками лайков, которые появляются сразу после комментария от Ваших же коллег (или Ваших лайков под аналогичными комментариями, пример: dou.ua/...rums/topic/24085/#1698905 или dou.ua/...rums/topic/23567/#1698652)
это выглядит не как помощь, а именно как работа по раскрутке и накрутке. На каких форумах Вы еще отвечаете (всей компанией имеется ввиду)?
структуру чего бы то ни было(страницы, хедера etc) лучше делать через grid.
управлять списком однотипных/одноранговых элементов — через flexbox.
если заказчик хочет поддержки старых(IE до 11 ) браузеров, то да, либо эмуляция через flexbox, либо float(IE8? opera mini?).
bootstrap дает кучу юайных контролов, еще со взаимно согласованными стилями. можно вполне его юзать для всего остального, кроме структуры.
И давно ИЕ11 начал поддерживать нормальную спецификацию грида? А ИЕ11 поддерживать, по моему личному опыту, хочет сейчас каждый первый заказчик, ибо % людей на нем все еще велик.
И давно ИЕ11 начал поддерживать нормальную спецификацию грида?
нет, конечно, не начал.
а давно вы встречали бекпортинг актуальной версии спеки в старые версии ИЕ? MS даже обнаруженные баги только в Edge закинули. например, косяк рассчета двух вложенных flexbox, который давал отрицательное значение, но для unsigned width. 3 миллиарда пикселей ширины — агонь же.
но. даже в -ms- вариции через autoprefixer это будет в сто раз лучше, чем float с его внезапными съездами блоков. плюс, возможность объединения смежных ячеек — этого ни с float, ни с flexbox в общем случае не добиться.
Для начала лучше хорошенечко изучить весь CSS) тогда таких вопросов не возникнет)
CSS grid, flexbox — это все свойства, части CSS`а. Bootstrap — это css framework и к нему считаю приступать после того как хорошо овладеешь CSS, да и не всегда он нужен, пробуй для начала писать самому, возможно даже свой мини-framework получится.
По CSS раскладкам очень советую этот доклад www.youtube.com/watch?v=okFs-XoZoxY , разжевано всё, от того с чего начиналось и до нынешних CSS Grid Layout. Знать желательно всё, уметь желательно начиная с таблиц, так как в рабочих моментах можно столкнутся с разными реализациями, а на практике не всегда применяются новые подходы, а там гляди и e-mail придется сверстать :D
Flexbox`ы можно смело использовать если не требуется поддержка IE 9 и ниже. Grid`ы учи, пробуй, балуйся но в продакшене пока проблематично.
По поводу адаптивности опять же зачем тебе Bootsrap, учи основы на чем все это основано ( Media Queries, подход Mobile First и смежные тематики.) CSS ведь не такой сложный чтоб при каждом вздохе использовать framework, обычно хватает пару своих классов с нужными свойствами.
jquery и bootstrap в 2018? Собираешься наниматься в веб-студию, которая клепает лендинги для украинских заказчиков с зп 3к грн?
грид и флексбокс — это не технологии, это такие же части css как margin и text-weight. Знать нужно и то, и другое, а вот применять — в зависимости от требований заказчика.
Нет такого свойства text-weight. Есть font-weight
затронул jQuery
*проверил календарь* Да не, вроде действительно через три недели
Попробуйте Adobe Muse, если цель — веб дизайн, а не вёрстка в чистом виде.
Многих творческих людей отпугивает веб дизайн из-за кодинга, и этот продукт создан как раз для них. Базовые принципы отзывчивого дизайна, вроде — что такое модульная сетка, конечно, лучше всё равно знать. Но остальное — продукт делает сам автоматически.
есть еще бесплатная альтернатива мьюзу — mobirise.com/ru . Правда не знаю, насколько оно годное, ибо не юзал.
Ни в коем случае не используйте этот софт, а советовать его начинающему верстальшику/frontend`еру это настоящий грех и минус в карму!) :D
Вы смотрели какой код выдаёт Adobe Muse? Там сплошной ад и черти! Мало того что в основу положен огромный болт на все общепринятые правила, договоренности хорошего кода, так ко всему прочему там можно сильно заблудится. Практически вся верстка в том числе сеточные раскладки реализованы на position: absolute, естественно о последовательности и предсказуемости элементов и речи идти не может. А насчет отладки и чтения этого кода я вообще молчу. На практике этот хлам абсолютно не применим и никому не нужен.
Единственное практичное применение Adobe Muse это по быстрому накидать какой-то временный макет, шаблон, схему и показать её заказчику в браузере...
ps... Были проекты дизайн которых был выполнен на Adobe Muse, в итоге все это переверстывалось вручную с 0 из-за абсолютной не применимости и невалидности кода.
Из более менее адекватных подобных инструментом могу посоветовать:
webflow.com
www.figma.com
Но опять же это больше инструменты для дизайнеров нежели для разработчиков.
Зачем править вручную, если можно в том же Muse сделать изменения?
Насчет грязноты кода — есть советы, как этого избежать, там есть нюансы в работе и обходные пути. Но думаю, кирпичники скоро исправят эти «детские болезни».
Но опять же это больше инструменты для дизайнеров нежели для разработчиков.
советовать его начинающему верстальшику/frontend`еру
Да, конечно! Я уточнил в комментарии, посмотрите внимательнее пожалуйста, что советую продукт для дизайнера.
В любом, случае, стоит знать о такой возможности делать дизайн не изучая кодинг.
В будущем этот код может попасть другому человеку который не пользуется Muse, и открыв файл он скажет пару «приятных слов» в сторону прошлого «разработчика» и закроет файл :D
Вы всерьез думаете что тот код который выдаёт Muse пригодный для применения в продакшене?) Дело не то в том что код грязный, там в корне не правильный подход и реализация CSS/HTML, так же такую верстку легко сломать, она не гибкая и не универсальная, не проходит валидатор. Это просто картинка на которую можно поклацать, небольшие изменения по контенту и размерам нежели в дизайне и все поехало, поплыло...
В конце концов дизайнеру не обязательно знать кодинг чтоб нарисовать дизайн, есть же Sketch. Вэб-приложения которые боль менее адекватный генерят код (привел ссылки выше) так же требуют знаний свойств CSS и это занимает больше времени чем в графическом редакторе.
Мои выводы не с потолка, я работал с макетами дизайна сделанными и в Adobe Muse и Webflow (интегрировал в CMS), и поверьте это небо и земля. Adobe Muse страницы перевёрстывались полностью из-за свой не пригодности на реальных задачах, с Webflow
Насчет грязноты кода — есть советы, как этого избежать, там есть нюансы в работе и обходные пути.
открыл первый попавшийся сайт из раздела samples. я правильно понимаю, что на каждый элемент навешивать уникальный id и связывать с ними стили снова и снова — это не инструмент делает, а пользователь тупит?
что советую продукт для дизайнера
хм. дизайнер либо делает готовую верстку со стилями нормальными(являясь и верстальщиком в одном лице), либо супер-быстро накидывает флоу и концептуальная структура в каком-то скетчере(кажись, это и есть UX, не?).
олдскульные раньше еще рисовали «красиво», не заботясь о реальности.
разве Muse попадает в какую-то из этих категорий?
являясь и верстальщиком в одном лице
разве Muse попадает в какую-то из этих категорий?
Muse попадает в другую категорию — тех, кто хочет делать веб дизайн не углубляясь в дебри кодинга. Как правило, творческие люди слабо разбираются в верстке — из-за другого типа мышления. И наоборот, хорошие верстальщики очень часто не могут придумать красивый дизайн, а качают готовый PSD из внешних источников.
Конечно, есть редкие исключения «и швец, и жнец», но они редки.
Думаю, за продуктами вроде Muse — будущее веб дизайна. Нужно что-то, что автоматизирует сложные процессы. Как, например, раньше инженеры считали сопромат вручную, а сейчас это все моделирует программный продукт, выдавая результат в реальном времени.
Согласен, что её код пока далёк от совершенства. Через какое-то время его доведут до ума. Скорее всего, в будущем, появятся подобные продукты и для разработки веб приложений, а не только для разработки всяких лендингов/визиток и т.п..
Но даже на данный момент — человек, не понимающий смысл фразы
на каждый элемент навешивать уникальный id и связывать с ними стили снова и снова
и даже не знающий HTML, может создавать сайты при помощи этих инструментов. Это большой плюс.
Через какое-то время его доведут до ума
не доведут.
концепция визуальных редакторов нифига не облегчает процесс унификации, реализации graceful degradation, использования 3rd party lib.
на выходе получается нечто медленное, немодифицируемое и рандомно глючное.
почему? потому что
человек, не понимающий смысл фразы ... и даже не знающий HTML
хер учтет такие вещи, как rtl текст, переполнение, нюансы с лейаутами. а так как элементы, судя по примерами, всё же позиционируются через position: relative/absolute, то и для определенных размеров элементы могут быть просто недоступны. А потом человек забыл задать отдельно стили для размера экрана менее 600рх, а там left: 800px в рассчете на большой экран.
может ли человек это учесть? да.
может ли учесть это «кто хочет делать веб дизайн не углубляясь»? нет.
Выход: использовать конструкторы на базе виджетов типа wix.com, меняя руками только бекграунд.
за продуктами вроде Muse — будущее веб дизайна
дык, прошлое же.
было такого уже и не раз.
adobe fireworks.
ms word -> save as HTML.
kony studio.
и куча других
за продуктами вроде Muse — будущее веб дизайна
дык, прошлое же.
ну на самом деле это не прошлое, и не будущее, а просто инструменты для непрограммистов для создания очень узкого набора веб-сайтов (сайты-визитки, магазины одного товара и всякого рода «хоумпэйджи»). Которые вряд ли будут дорабатываться какими-то программистами (ибо смысл? да и домохозяйкам обновление функционала для сайтов типа «я и моя сраная кошка» вряд ли когда-либо понадобится).
И такого рода инструменты ИМХО были, есть и будут)
И походу вордпресс первоначально тоже из этой же оперы был, если не ошибаюсь, это потом он оброс всякими плюшками типа вукоммерс и т.п.
ms word -> save as HTML
это был такой костылище, что аж страшно вспомнить)))
ибо кто бы мог подумать, что инструмент ни разу не предназначенный для создания сайтов будет иметь опцию для создания html-страничек, если для этого уже в то время был FrontPage)
хотя хз — может и счас этот костылище есть в ворде — не знаю, не проверял (ибо не юзаю последние версии мс-офиса).
и куча других
и там таки есть любопытные варианты)
а просто инструменты для непрограммистов для создания очень узкого набора веб-сайтов
да, согласен, про «прошлое» то я загнул.
как и у «курсов Форекса» или «как соблазнить за один разговор» здесь есть своя ниша.
bootstrap 4 во всю использует и grids и flexbox, но это абсолюно не значит что не нужно знать как работать с ними на уровне css, для универсала нужно как минимум bootstrap 3, 4 и flexbox. С Grid также нужно познакомиться но в продакшен я например его пока не использую — слишком недавно началась его поддержка основными браузерами — думаю полноценно использовать можно будет через полтора — два года
Придётся знать всё. Но начинай с Bootstrap, на нём написано больше и вылизан круче.
Для таких базовых конструктов важна не живучесть и продуктивность, а прежде всего поддержка старыми браузерами. Особенно мобильные юзеры от этого страдают — те кто пользуется браузером из родной прошивки, необновляемым. А верстальщику соответственно лучший путь — это накатанные технологии, и крайней скептицизм по отношению к новинкам.
Флексбоксы уже внедрены давно, их учи следующими. Grid пока не трогай, пусть войдёт в тренд.
Простой пример: переменные в CSS. Казалось бы сколько лет они уже формально есть, а как доходит до дела — это адище, ещё и неотлаживаемое.
Простой пример: переменные в CSS. Казалось бы сколько лет они уже формально есть, а как доходит до дела — это адище, ещё и неотлаживаемое.
Так используйте препроцессоры CSS, например SASS, будут вам переменные ))
Но начинай с Bootstrap, на нём написано больше и вылизан круче.
Иногда сталкиваюсь с поделками начинающих разработчиков, которые используют Bootstap, имея очень слабые знания CSS. Поэтому лучше научится хорошо верстать без фреймворков, потом будет гораздо легче.
Я не говорю что нет велосипедов. Лишь утверждаю факт, что война браузеров делает внедрение новых технологий нерентабельной. И учитывая нерезиновое время себя любимого, учить нужно то что УЖЕ работает. А все обещания оставить тестировать «настоящим буйным».
Лучше начинающие разработчики, чем конченые [поминая злым тихим словом индийских].
ещё и неотлаживаемое
ээээ? как это? открыть developer tools и будет отображено так же, как и любые другие свойства: и на вкладке styles, и на вкладке computed. или вам breakpoint’ы подавай?
Flexbox используется повсеместно (хотя есть нюансы с IE), Grid набирает популярность, обещают полную поддержку в браузерах.
Bootstrap не использую (для себя не вижу преимуществ)
Дабы понять что лучше, нужно изучить не основы, а уверенно css. Попробовать написать какие то снипеты, автоматезировать работу, и вот когда дойдет дело до того, что пора брать какой инструмент для ускорения разработки — вот тогда береться каждый по порядку и пробуеться. Востребованным инструмент должен быть для тебя в первую очередь. У всех перечисленных есть что то общее, но это всего лишь какой то процент. Придет время и возможно появиться необходимость использовать одновременно несколько инструментов. Пока в 4 БС небыло встроенного флекс, была необходимость таскать отдельно 3 БС с примесью флекс. Думаю изначально надо изучать БС и наверно начиная с 3 версии. Потом отдельно флекс. Ну и там уже будет понятно где и что тебе пригодиться. Для банального лендинга бс ненужен, на флекс сделал сетку и застелизировал. Если это что то типа магазина, где имеютьчя элементы навигации, такие как кнопки, табы, формы, и тд, тогда ставишь БС, ну и при необходимости домешивпешь флекс, дабы сетка была более универсальна, а позеционирование было более гибким. На флекс при хорошем знании и Понимании ЦСС должно уйти ровно пол дня. Максимум день. А лучше изучать lass sass scss что из, и создать свой инсьрумент.
что бы оценить всю прелесть grids и flexbox сначала надо изучить tables
А почему что-то одно? Лучше все, да и материала немного ведь.
Скорее всего в работе придется столкнуться с проектами, использующими бутстрап, так что взглянуть не помешает. Флексы уже повсеместно, да и 4й бутстрап на них завязан. Гриды поддерживаются всеми современными браузерами еще с марта, через год-два тоже будут везде, так что их изучение не помешает.
uikit еще неплохая альтернатива bootstrap, с модульным подключением необходимых расширений. Но это все бессмысленно без азов адаптивной верстки
Сначала научись верстать адаптивно без использования сторонних библиотек, флексбоксов, гридов и тд. upd: И кстати, забей на jQuery, учи сразу нативный джс.
Лол, флексбоксы изначально созданы для адаптивной верстки и это нативный функционал CSS. Поддержка браузерами на данный момент 97.7%.
Нет, ты должен страдать!
То есть на каждую 1000 пользователей есть 23 Дартаньяна, которые выэпьют мозг. На продакшене знаешь ли это совсем не лол, когда одним их этих дартаньянов отказывается зам.директора [по счастью] заказчика.
А я где то написал что не нативный? По поводу флексбоксов, расскажешь это кастомеру когда тебе зайдет поддержка ie10 и меньшн.
Ну так если у тебя такие го..но заказы с ie8-10 то не обобщай
Volodymyr Kryvytskyi
Sergii Voloshyn
NewOne NewOne
Volodymyr Kryvytskyi
Mucola Demchenco
Євген Козлов
Dmitriy Miekh
Євген Козлов
Andrew
Dmitriy Miekh
Artem Voloshchuk
Sssssss
Artyom Fedosov
Stan Maleev
minodvesP Vasya
Andrew
Stan Maleev
Ruslan
Олексій Пєніє
Podoprigora Alexandr
Олексій Пєніє
Podoprigora Alexandr
Александр
Alex Bylim
Serhii Dudnyk
Dmytro Klenovyi
Sasha Potienko
Veles Rod
Igor Filippov
Coding Books
Timur Chanturia
Igor Filippov
49 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів