connecticum

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

Recommended Posts

Господа, требуется ваша помощь!  Я просто запутался, голова идет кругом! Суть проблемы такова, я посмотрел уже достаточно много курсов и до сих пор не могу понять как правильно верстать! Вроде неплохо знаю теорию, различные инструменты, пишу на 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 – крайне не понравился, там нет ответов на мои вопросы. 

 

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

Share this post


Link to post
Share on other sites
Цитата

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, имхо, самое лучшее что есть. Верстка довольно хорошая.

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

Share this post


Link to post
Share on other sites
Цитата

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 by Agony741

Share this post


Link to post
Share on other sites
Цитата

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By kapushoniha
      Добрый день!
      Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело.
      Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать.
        Для начертаний bold и 300 все ок.
      Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ?
      Шрифт подключаю так:
      <style> @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Medium.eot'}}"); src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'), url("{{asset 'Gotham-Medium.woff'}}") format('woff'), url("{{asset 'Gotham-Medium.ttf'}}") format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Bold.eot'}}"); src: url("{{asset 'Gotham-Bold.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Bold.woff2'}}") format('woff2'), url("{{asset 'Gotham-Bold.woff'}}") format('woff'), url("{{asset 'Gotham-Bold.ttf'}}") format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Light.eot'}}"); src: url("{{asset 'Gotham-Light.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Light.woff2'}}") format('woff2'), url("{{asset 'Gotham-Light.woff'}}") format('woff'), url("{{asset 'Gotham-Light.ttf'}}") format('truetype'); font-weight: 300; font-style: normal; } </style>  
      Заранее спасибо!
       
       

    • By vladidik
      Ребята тем кому интересна тема веб разработки и основы html заходите на канал
      https://www.youtube.com/playlist?lis...O-kk6CcVLtYXYV
      так же информация для новичков будет дополняться.
      Основы HTML это не предел. в дальнейшем будет уроки по css, js по web фреймворкам. bootstrap и в дальнейшем будет объясняться натяжка вёрстки на wordpress
    • By Tascan
      Всем привет.
      Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem.
      И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px.
      Но стоило изменить единицы измерения в высоте:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px.
      Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit?
      И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  • Member Statistics

    46,451
    Total Members
    3,128
    Most Online
    rhouland
    Newest Member
    rhouland
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Вернулся в свою созданную тему через 4,5 года. )) После создания темы около года верстал заказы на фрилансе. От обычной верстки до полноценных LP и небольших сайтов. Даже один раз из своей верстки шаблон Wordpress сделал.   Потом заинтересовался другими нишами и верстку забросил. Арбитражил, занимался СЕО, даже трейдил криптовалютой больше года. Но опять потянуло в вебразработку. Пытаюсь снова все вспомнить. Мешает только основная работа - мало времени остается на своё хобби.  В общем, кому сроки не жмут и кто не боится доверится джуниору, милости просим. Сверстаю, подправлю, помогу. В свободное от работы время. Бескорыстно. Просто хочется снова покодить и не просто так, а чтобы с пользой.  Почта : zdl79@mail.ru Skype : forest19791 Телеграмм : https://t.me/forestino
    • Могу попробовать. Опыт верстки 1 год. Но в связи с основной работой, не связанной с IT, мало на это времени. zdl79@mail.ru
    • Здравствуйте, кажется я делаю что-то не так, но вот что именно никак не пойму.
      Проблема в следующем: подключаю карусель и блок становится неактивен, хотя вроде бы все должно работать как нужно.
      Пробовал подключать карусель и через cdn и через скачанный архив - результат один и тот же.
      Открывал через google, firefox и opera-у - все так же никакого сдвига.
      Подключал по инструкции на официальном сайте.
      Пробовал использовать SlickSlider, но результат тот же.
  • Popular Contributors