Какие сетки вы используете в своих проектах? И куда двигаться дальше?

Question

[Анита Ковалева]

Всем привет, только начала изучать веб разработку, очень понравилась эта сфера деятельности, перехожу на нее с дизайна. Прошла первый курс интенсива HTML Academy. И возник вопрос. Так много стеков, и так много инструментов для разработки, особенно если смотреть на hh по объявлениям. Помогите глупой не запутаться во всех этих причудах и дайте совет на что делать упор.
Что изучила - база html5\html, css\css3, препроцессоры, сборщики, сверстала 7 макетов, немного погоняла себя с js(пока очень сложно). Сейчас задалась вопросом как писать и делать проекты, поспрашивала у знакомых(благо хватает знакомых, те кто занимается именно вебом, но разброс советом просто колоссальный).
Кто-то советуют делать адаптивные сетки самостоятельно сливая вместе флексы и гриды и писать на ванильном css без фреймворков, много советуют фреймворк smartgrid, пара используют bootstrap и плюют на все остальное считая это лишними усилиями. И понять, кто прав и кому верить я не смогла. Прошу не кидаться помидорами в меня, за возможно столь глупые вопросы. Но хочу сразу идти в правильную сторону зацепляя меньше граблей. Если дадите пару развернутых советов по примерном выборе стека и аргументов в пользу него, буду очень благодарна.

Answer 1

[Владимир Проскурин]

но разброс советом просто колоссальный

Тут будет еще колоссальнее.

инструментов для разработки

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

если смотреть на hh по объявлениям.

Вакансии по чистой верстке не такие объемные по требованиям. Но часто требуют JS, сейчас без него никуда.

Сейчас задалась вопросом как писать и делать проекты, поспрашивала у знакомых

Прошлогодний ответ, но все еще актуальный Верстка с нуля: какие основные этапы работы?

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

При хороших знаниях css, в особенности flex и grid, вам не нужно будет использовать всякие фреймворки. Никогда не любил их использовать, всегда одинаково по времени разработка занимала как с css фреймворками, так и без. Но вы должны ориентироваться на себя. Попробовать стоит и так и так, но на начальных этапах советую делать упор на чисты css, чтобы лучше понимать, как это работает. Фреймворки лишь обертки.

И понять, кто прав и кому верить я не смогла

Тут будет также. Единственный выход, послушать всех, попробовать самой и принять решение.

Но хочу сразу идти в правильную сторону зацепляя меньше граблей.

Грабли, как и ошибки, довольно полезная вещь в изучении. Помогает оценить, почему так ошибся, как сделать так, чтобы больше так не ошибаться.

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

Учите чистый css, html и js, по мере работы будете понимать, какие инструменты вам необходимы, чтобы облегчить/ускорить разработку. Закидаете себя сейчас инструментами - перегорите и бросите.

Answer 2

[Destell]

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

Answer 3

[shmatuan]

Все варианты хорошие, так что это может быть только личный выбор - мне, например, без сеток (col-md-12 ) удобнее (flex+grid) - через @media всё легко контролировать на всех экранах.
Лучше попробовать с каждым вариантом сверстать адаптивный лендинг - тогда и станет ясно что удобнее)

Answer 4

[Flying]

Использую Susy (пока что 2-ю версию в силу ряда причин, но вообще рекомендую 3-ю). Причина выбора - возможность строить произвольные сетки (в том числе нерегулярные) при полном отсуствии навязывания каких-либо технологий реализации сеток. Мне в этой библиотеке нравится именно её гибкость т.к. она даёт только математику сетки. Одновременно с этим для новичка подобный подход может оказаться слишком сложным, но познакомиться с ним imho стоит. На самом деле сделать базовую сетку самостоятельно - очень несложно, особенно если использовать препроцессоры, имеет смысл разок попробовать ее реализовать.

Один из моментов который не очень хорошо решается "стандартными" сетками - отсутствие поддержки внешних отступов внутри контейнера когда сетка должна занимать не всю ширину, а (ширину минус отступы). Конечно это решаемое ограничение, но оно имеет место быть. Подход bootstrap с заданием сетки через CSS классы лично мне не нравится т.к. порождает кучу лишних CSS классов которые в случае смены layout'а необходимо менять в коде (а не в стилях) проекта. Но здесь опять же кому что, да и у подхода с CSS классами есть свои плюсы - можно дать возможность бОльшего контроля layout'а разработчикам.

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