Существует ли краткое древовидное руководство по вёрстке?

Question

[Дмитрий Есин]

Если особенности html и css изучены, но существуют пробелы в схематичности знаний и требуются такие подсказки, например:
- когда какой тип позиционирования использовать;
- когда применить методологию БЭМ, а когда сверстать макет простыми div'ами или элементами html5;
- способы центрирования блоков;
- итд.
Необходимо что-то вроде такой древовидной структуры: https://coggle.it/diagram/Vfk3_SwDy7sQL1wk
Цель - при оценке макета, взглянув на такую "шпаргалку", быстро прикинуть какие элементы каким способом будут верстаться, где какую методику применить и дальше уже работать на основе полученных знаний и со справочниками, которых полно в сети, тот же wc3 или htmlbook.

Comments

[Anton Filippov]

ты из разряда людей, которые слишком загоняются. просто бери и верстай

[helvit]

Антон Ф.: ага, как в анекдоте: что тут думать - прыгать надо

Answer 1

[Максим Тимофеев]

Ваш вопрос из разряда "Как начать рисовать? Слева вправо или справа в лево?"
Все зависит от проекта и каждого конкретного случая. Я так понимаю, Вы прочитали много, а сделали мало. Поэтому занимайтесь практикой и побольше думайте. Ибо тот или иной способ оправдан в том или ином случае. И не может быть методички, где будет расписаны все случаи. Так как на практике вы сталкиваетесь не с проблемой позиционировать элемент внутри дива, а учитываете тот факт, что этот див является частью странице где еще куча элементов. Всегда есть много способов и чаще один из них правильный.

Answer 2

[Елизавета Борисова]

Вам не нужно ничего учить и собирать шпаргалки. Загрузите себя задачами, основные моменты быстро отложатся в памяти: позиционирование, центрирование и тп, остальное и в принципе запоминать не стоит, в процессе работы все равно будет много гугла.
Для оценки трудозатрат на макет гораздо важнее требования адаптивности, число платформ, интерактив (CSS-анимации, svg ). Расположение элементов не является основной работой.

Answer 3

[Виталий Киренков]

Простите, но при таких вопросах - у вас особенности html и css вообще ни разу не изучены!

htmlbook.ru - для начала в помощь.

Comments

[Дмитрий Есин]

Так дело всё в том, что как раз перелопачено много информации, много курсов итд. Но всё это не запоминается ведь наизусть - необходимое значение нужного свойства всегда пожно подсмотреть в справочнике. Я тут скорей о методиках спрашивал. Чем абсолютное позиционирование от относительного отличается и т.п. базовые вещи я прекрасно понимаю. Нет только методики - что с чем сочитается лучше.
Например, flex-box и float нет смысла сочетать, т.к. это разные методики одной сущности.

[Виталий Киренков]

Дмитрий Есин: а это уже вопрос опыта... опыт не купишь =))

Answer 4

[Юрий]

Судя по вопросу и ответам, вам действительно не хватает практики.

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

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

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

Answer 5

[Евгений Гущин]

Берёшь готовый HTML-шаблон, похожий под требуемую реализацию проекта на последней адаптивной версии Bootstrap. Меняешь классы у блоков до достижения необходимой структуры новых блоков/страниц. CSS желательно редактируя сразу на SASS. После тестирования на кроссбраузерность(основа Chrome) Десктопной версии переходишь к адаптивному мобильному виду.

Всё время следуя правилу - Достаточно ли я чисто выполнил вёрстку данного элемента, не наделал ли я лишнего из-за недостатка знаний. Не делайте лишних блоков для оформления, используйте псевдоэлементы и CSS 3.

Если необходимо создать новую страницу(если вы отвечаете за дизайн также), то до вёрстки желательно сделать её динамический прототип на Axure, утвердить данную страницу с программистами, директорами и только потом верстать. Таким образом максимум придётся дорабатывать готовую страницу 1-2 раза, а не 10-20 раз. Следовательно экономия времени.

Дизайнер должен знать как верстаются элементы по сетке. Верстальщик должен знать дизайн, чтобы быть уверенным что дизайнер спроектировал качественный адаптивный дизайн. А вот верстальщик необязательно должен сразу становится фронтендом, то есть изучать сразу JS.

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

Чем больше знаний и опыта у специалиста тем меньше требуется ему времени на разработку элемента. Однако спешить не следует, необходимо следовать системному подходу, продумывать юзабилити заранее и начинать с прототипа, который строится от максимально эффективно(функционально) реализованной идеи.

Древовидное руководство по вёрстке) Рекомендую побольше почитать про "шаблонизацию", думаю, вы про это хотите узнать.

Answer 6

[Сергей Зеленский]

Если не знаете когда какой тип позиционирования использовать то

особенности html и css

не изучены, центрирование блоков делают по разному, можно margin, можно position, внимательно читайте про позиционирование в чем разница между relative и absolute, когда поймете вопросов когда что использовать не будет

Answer 7

[ysaeredir]

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

Comments

[Дмитрий Есин]

Прочитал "Объектно-ориентированное мышление" Мэтта Вайсфельда, действительно, некоторые фундаментальные вещи становятся понятными после такого чередования.