Anitamsk
@Anitamsk
Frontend Dev

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

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

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

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

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

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

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

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

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

Учите чистый css, html и js, по мере работы будете понимать, какие инструменты вам необходимы, чтобы облегчить/ускорить разработку. Закидаете себя сейчас инструментами - перегорите и бросите.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Destell
@Destell
React, React Native junior developer
Советую попробовать самостоятельно предложенные варианты и определить, что именно окажется более удобным.
Лично я предпочитаю использовать "свои" сетки, имхо, они делают код чище, чем при использовании бутстрапа.
Ответ написан
Комментировать
shmatuan
@shmatuan
8 year of Web, 5 years of Vue
Все варианты хорошие, так что это может быть только личный выбор - мне, например, без сеток (col-md-12 ) удобнее (flex+grid) - через @media всё легко контролировать на всех экранах.
Лучше попробовать с каждым вариантом сверстать адаптивный лендинг - тогда и станет ясно что удобнее)
Ответ написан
Комментировать
@Flying
Использую Susy (пока что 2-ю версию в силу ряда причин, но вообще рекомендую 3-ю). Причина выбора - возможность строить произвольные сетки (в том числе нерегулярные) при полном отсуствии навязывания каких-либо технологий реализации сеток. Мне в этой библиотеке нравится именно её гибкость т.к. она даёт только математику сетки. Одновременно с этим для новичка подобный подход может оказаться слишком сложным, но познакомиться с ним imho стоит. На самом деле сделать базовую сетку самостоятельно - очень несложно, особенно если использовать препроцессоры, имеет смысл разок попробовать ее реализовать.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы