Как правильно верстать? (много вопросов по пунктам внутри)

[connecticum]

Господа, требуется ваша помощь!  Я просто запутался, голова идет кругом! Суть проблемы такова, я посмотрел уже достаточно много курсов и до сих пор не могу понять как правильно верстать! Вроде неплохо знаю теорию, различные инструменты, пишу на js небольшие приложения, но вот основы верстки никак не могу понять! Саму базу. В принципе, я могу взять любой макет и сверстать по нему сайт, но разве какой-нибудь margin-top: -3px и right: 7px являются правильным подходом? Это ведь говнокод! Но зато я сделаю как на макете. Но ведь так верстать полюбому неправильно! Я не могу понять именно как ПРАВИЛЬНО верстать!
Попробую структурировать вопросы:

1.    С чего начинается верстка? Допустим с макета psd. Я сажусь рисовать макет, какой размер холста мне выбрать? Где можно посмотреть, найти эти стандарты? Вообще не знаю размеры макетов.
2.    В чем задаются все размеры в 2018г?  Неужели еще в пикселях? Rem или em?
3.    Допустим я нарисовал макет, сверстал его, дальше просто media-queries добавляю  и под каждый брейкпоинт изменяю верстку?
4.    Какие делать брейкпоинты? Есть ли «золотой набор»? Можно своровать от бутстрапа?
5.    Как добиться чтобы сайт смотрелся на всех экранах одинаково? Как быть с разным pixel ratio?
6.    Как тестировать вид сайта на разных учтройствах? Достаточно в панели разработчика в хроме? Есть ли какие-нибудь сервисы для этого?
7.    Если на каком-то экране смотрится коряво, то создавать новый брейкпоинт под это устройство?
8.    Насколько критично добавлять бутстрап к проекту и jquery? В инете столько негатива на этот счет, что сильно увеличивает размер странички и т.п. Есть ли смысл менять бутстрап на что-нибудь легковесное только из-за его размера?
9.    По поводу бэма – насколько он популярен, стоит ли его использовать и не избыточно ли добавление класса к каждому элементу? 
10.    Можно ли использовать в 2018г большую вложенность в css div > ul > li > a? Мне так удобно.
11.    Вот на этом пункте мне немного стыдно, но я до сих пор не знаю как правильно оформлять main css, чтобы подключать его к нескольким страницам. Как вообще с этим в обычной практике, для каждой страницы своя стилизация используется или подключаются несколько стилей вкупе с главной?
12.    Дайте пример видоса(курса) эталонной верстки?! Язык не важен. Смотрел базовый курс от htmlacademy – крайне не понравился, там нет ответов на мои вопросы. 

 

Ребята, буду крайне вам благодарен если поможете расставить все по полочкам!!!
Спасибо!
 

[Tilonorrinco]

Цитата

1.    С чего начинается верстка? Допустим с макета psd. Я сажусь рисовать макет, какой размер холста мне выбрать? Где можно посмотреть, найти эти стандарты? Вообще не знаю размеры макетов.

Не совсем понял: речь идет о верстке или о дизайне? Зачем верстальщику рисовать макет? Дизайнеры обычно ориентируются на стандартную сетку и рисуют макет шириной где-то в 1200пх.

 

Цитата

2.    В чем задаются все размеры в 2018г?  Неужели еще в пикселях? Rem или em?

Я использую пиксели и не парюсь.

Цитата

3.    Допустим я нарисовал макет, сверстал его, дальше просто media-queries добавляю  и под каждый брейкпоинт изменяю верстку?

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

Цитата

4.    Какие делать брейкпоинты? Есть ли «золотой набор»? Можно своровать от бутстрапа?

Да, имхо, это самый подходящий вариант.

Цитата

5.    Как добиться чтобы сайт смотрелся на всех экранах одинаково? Как быть с разным pixel ratio?

Картинки -- либо в свг, либо увеличенные в несколько раз.

Цитата

6.    Как тестировать вид сайта на разных учтройствах? Достаточно в панели разработчика в хроме? Есть ли какие-нибудь сервисы для этого?

Скачать нужные браузеры и тестировать в них. Сейчас различия в отображении сайта встречаются редко. Сафари тестировать проблематично. Решение: хакинтош, купить оригинальный девайс от эпл либо browserstack.com

Цитата

7.    Если на каком-то экране смотрится коряво, то создавать новый брейкпоинт под это устройство?

Лучше пользоваться готовыми наборами брейкпоинтов (не больше 4х точек). Если коряво -- попробовать перестроить сетку по-другому, уменьшить шрифт или отступы на последнем брейкпоинте и т.п.

Цитата

8.    Насколько критично добавлять бутстрап к проекту и jquery? В инете столько негатива на этот счет, что сильно увеличивает размер странички и т.п. Есть ли смысл менять бутстрап на что-нибудь легковесное только из-за его размера?

Глупости. Можно добавлять.

Цитата

9.    По поводу бэма – насколько он популярен, стоит ли его использовать и не избыточно ли добавление класса к каждому элементу? 

Нужно использовать. 

Цитата

10.    Можно ли использовать в 2018г большую вложенность в css div > ul > li > a? Мне так удобно.

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

Цитата

11.    Вот на этом пункте мне немного стыдно, но я до сих пор не знаю как правильно оформлять main css, чтобы подключать его к нескольким страницам. Как вообще с этим в обычной практике, для каждой страницы своя стилизация используется или подключаются несколько стилей вкупе с главной?

Есть много подходов к архитектуре стилей. Общий принцип такой: отдельные стили инклудятся в main.scss и его сжатая версия после компиляции подключается в html. А уж по каким папкам и по какому критерию разграничивать стили -- каждый решает для себя. Единственного верного решения здесь нет.

Цитата

12.    Дайте пример видоса(курса) эталонной верстки?! Язык не важен. Смотрел базовый курс от htmlacademy – крайне не понравился, там нет ответов на мои вопросы. 

Курсы по верстке от htmlacademy, имхо, самое лучшее что есть. Верстка довольно хорошая.

На все вопросы, которые были заданы есть ответ в курсах. Советую обратить внимание на продвинутый интенсив.

[Agony741]

Цитата

1.    С чего начинается верстка? Допустим с макета psd. Я сажусь рисовать макет, какой размер холста мне выбрать? Где можно посмотреть, найти эти стандарты? Вообще не знаю размеры макетов.

Обычно дизайном в компаниях занимается один человек а версткой другой. 

Цитата

2.    В чем задаются все размеры в 2018г?  Неужели еще в пикселях? Rem или em? 

Ну если верстаешь все на em/rem будь готов к тому что заказчик скажет что отступ кнопки не нравится ему, нужно на 10px больше сделать а у тебя все в em или rem иди гадай потом какой отступ нужно указывать. (много времени не займет но все же, для меня это минус, а заказчики разные бывают еще не то спросят)

Цитата

3.    Допустим я нарисовал макет, сверстал его, дальше просто media-queries добавляю  и под каждый брейкпоинт изменяю верстку?

Можешь сразу добавлять, например, сверстал одну секцию и сразу же протестировал. 

Цитата

4.    Какие делать брейкпоинты? Есть ли «золотой набор»? Можно своровать от бутстрапа?

Обычно эти размеры дизайнер задает, вы получайте уже готовый макет оттуда и берете брейкпоинты. 

Цитата

5.    Как добиться чтобы сайт смотрелся на всех экранах одинаково? Как быть с разным pixel ratio?

Сайты не должны смотреться на всех экранах одинаково, у браузеров движки разные и каждый работает по своему. Вьюпорт и 2x картинки.  

Цитата

 

7.    Если на каком-то экране смотрится коряво, то создавать новый брейкпоинт под это устройство?

 

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

Цитата

8.    Насколько критично добавлять бутстрап к проекту и jquery? В инете столько негатива на этот счет, что сильно увеличивает размер странички и т.п. Есть ли смысл менять бутстрап на что-нибудь легковесное только из-за его размера?

Смотря куда попадешь, есть студии которые на этих "сетках" бустрапа и JQuery сайты как печатная машинка сайты печатают, а есть нормальные которые запрещают использовать такое. 
ps: хотя единого мнения здесь нет, каждый решает свою задачу как считает правильным.

Например: Если сайт простой и там мало JS то и JQ использовать не стоит, так как сама библиотека будет весить больше чем функционал нужный сайту.  

Цитата

9.    По поводу бэма – насколько он популярен, стоит ли его использовать и не избыточно ли добавление класса к каждому элементу? 

Для поддержки кода он очень удобен особенно с препроцессорами, если вы еще не сталкивались с БЭМ значит вам она еще не пригодилась.  

Цитата

10.    Можно ли использовать в 2018г большую вложенность в css div > ul > li > a? Мне так удобно.

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

Цитата

11.    Вот на этом пункте мне немного стыдно, но я до сих пор не знаю как правильно оформлять main css, чтобы подключать его к нескольким страницам. Как вообще с этим в обычной практике, для каждой страницы своя стилизация используется или подключаются несколько стилей вкупе с главной?

Насколько я знаю для этого вебпак есть, он распределяет все это, нужные стили разделяет как-то на нужную страницу. Из курса по галпу у Кантора слышал.  

Не совсем уверен, но, чем меньше запросов на сервер тем лучше.

Цитата

12.    Дайте пример видоса(курса) эталонной верстки?! Язык не важен. Смотрел базовый курс от htmlacademy – крайне не понравился, там нет ответов на мои вопросы. 

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

Нету в верстке ничего правильного и неправильного, есть только:
- Спецификация
- Задачи 
- Инструменты 

И каждый разработчик по своему это все реализует.  

Edited April 12, 2018 by Agony741

[htmlacademy]

Цитата

Дайте пример видоса(курса) эталонной верстки?! Язык не важен. Смотрел базовый курс от htmlacademy – крайне не понравился, там нет ответов на мои вопросы. 

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

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