Есть книги по верстке, не основы css, а именно как верстать правильно?

Question

[Neznaika066]

Верстать научился, основы выучил хорошо, только не знаю где как правильнее делать. Макеты из psd верстаю без проблем. Пока к адаптивной верстке не приступил, вот думаю, может лучше сначала почитать книжки и потом уже перейти к вопросам адаптивности и кроссбраузерности ? Как мне сейчас лучше поступить ?

Answer 1

[Сергей ZSA]

Быстрый ответ: habrahabr.ru/post/114256
----------------------------------------------------------
Если вы знаете основы, значит знаете определенные css правила. Скажите такую вещь, как мне правильно сверстать 3 блока, идущих в ряд горизонтально?
Варианты ответов:
1. Используя float
2. Используя inline-block
3. Используя flex-box
4. Используя table
5. Используя position 0_o (потому что можно задать relative родителю и absolute детям+top/right/bottom/left)

Правильный ответ: всё выше перечисленное (ну может быть последнее не очень верно, но ведь тоже можно сделать и сделать очень аккуратно, не повредив общей структуры сайта). Ваш вопрос как по мне просто идентичен моему по смыслу. В разных ситуациях используются совершенно разные подходы, а количество этих ситуаций измеряется количеством вашего/чьего-то воображения.
--------------------------------------------------------------------------------
Если вы работаете в команде - спросите/посмотрите какой стиль вёрстки использовался до вас и можно ли использовать свой стиль, либо верстать так, как раньше верстали (многие команды даже гайды пишут по этому поводу, к примеру csssr).
Если работаете один - можно тоже самое blog.csssr.ru/code-guide и ещё в довесок ссыль в начале поста.

Comments

[Андрей Б.]

Убил бы за выравнивание через position

[Сергей ZSA]

Андрей Б.: аналогично, но будем надеяться, что такого версталу накажет заказчик.

[Валерий Суворов]

Выбираю вариант 1! То есть через float:left

[Сергей ZSA]

Валерий Путин: я бы через flex-box в 85% случаях, иначе на inline-block либо таблицах и только в последнюю очередь на float (про position говорить не буду и так всё понятно)

[drtvader]

Сергей ZSA: а почему нельзя через position?

[Сергей ZSA]

drtvader: задолбитесь сайт поддерживать потом. Представьте, нужно заменить блок какой-то и он будет чуть шире того, что там уже есть и чуть выше. Сколько времени вы потратите на то, чтобы через position всё поровнять (ведь этот блок может заехать на другие)? А адаптировать под все экраны сколько времени займет? Через flex-box это сделается всё за минуты, на position придется возиться долго. Есть и ещё причины, но этих двух думаю достаточно.

[Александр Фадеев]

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

[Сергей ZSA]

Александр Фадеев: Вы оспорили мой ответ, потом сами же и согласились. Странно вообще. И да, я посмотрел бы на вас, когда бы вы возились с вёрсткой к примеру из web builder-а. Кто не умеет верстать на всех тех предыдущих методах - сверстает на position и сделает это 100% убого в плане поддержки. Я перебрал уже больше 1000 сайтов совершенно разных людей и от совершенно разных верстальщиков, так что знаю о чем говорю.

[Александр Фадеев]

Я лишь отметил, что верстка на position'ах может существовать и вполне успешно, при этом порой будучи более стабильной в разных браузерах, чем другие варианты. Но это не для каждого и нужно все таки делать более привычными методами. А те, кто делает верстку в web builder-е, тем орудовать позишионами вообще восприщается, ИМХО. Вот и все.

[Сергей ZSA]

Александр Фадеев: билдер сам по себе использует position для элементов на странице и естественно добавить как-то новый элемент не через position не получится, придется все элементы смещать и не просто танцевать с бубном, а входить в астрал. Многие новички верстают подобным образом даже руками. По поводу того, что это будет стабильней - расскажите это IE)))

[Александр Фадеев]

Сергей ZSA: как ни странно, в свое время был траходром с одним проектом на 6-ом осле. И пока я не перевел всю верстку на жесткое позиционирование с прописью четкой иерархии relative/absolute, на места не становилось.

[Сергей ZSA]

Александр Фадеев: это было до эры адаптивных сайтов?

[Александр Фадеев]

Сергей ZSA: На заре их формирования только + это было промо. Boilerplate только появлялся, вроде версия 0.6 было или чот такое, а о БЭМ я тогда вообще не знал. =)

[Александр Фадеев]

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

[Сергей ZSA]

Александр Фадеев: тоже перемещался в те времена туда сюда от дизайна к вёрстке. Честно говоря, даже сейчас порой верстать надоедает, даже если разбавлять back end-ом и возвращаюсь к дизайну.

Answer 2

[Rodion Svetlitskiy]

Лучший способ, понять как верстать правильно, это посмотреть исходники общепризнанных решений, от опытных специалистов. Советую вам изучить код нескольких css-фреймворков, например Foundation и Bootstrap. Css код первого, на мой взгляд, практически эталон.

Comments

[Moe Green]

и еще может - uikit? мне там нравиться, как у них сделано.

[Rodion Svetlitskiy]

Valery Semenencko: Полностью согласен, Uikit мне кажется интересным.

Answer 3

[Миша Коган]

Бен Фрейн - Разработка сайтов для любых браузеров и устройств

Answer 4

[Денис Князев]

Работа с сеточками почитай, 12 колонок, 16 колонок, что за grid 960 такой.

Answer 5

[Evgeny Svirsky]

Есть чёткие курсы от Московской Школы "Специалист" по вёрстке. Поищите, очень качественные курсы для новичка.

Answer 6

[Владислав Безенсон]

Вот очень хорошая книжка: https://smacss.com/

Answer 7

[Сергей Конаков]

Тим Харроуэр. Настольная книга газетного дизайнера