Суть блочной верстки,алгоритм,план?

Question

[Леонид Кузнецов]

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

Answer 1

[Сергей Протько]

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

Так же у вас в голове должно сформироваться представление о том что такое элементы, какими они бывают (строчные, блочные, inline-block, flex) и в чем между ними различие, когда какие применять и т.д.

Затем вы должны разобраться с такой вещью как поток.

Так же было бы неплохо почитать про БЭМ. Не стоит применять этот подход в чистом виде по началу, пока вы не разберетесь во всем. И уж тем более если вы не используете какие-либо инструменты автоматизации. Но саму идею вы должны усвоить.

Ну и для начала вам этого должно хватить.

Comments

[Сергей Протько]

Aingis: спасибо что поправили.

Что до БЭМ и препроцессоров - я бы вообще не рекомендовал нынче отказываться от последних.

[Леонид Кузнецов]

Благодарю за столь драгоценный совет!!

Answer 2

[YemSalat]

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

Что бы вестать лучше - нужно верстать больше и изучать разные подходы.

Comments

[YemSalat]

Aingis: Я могу много таких придумать.
Например api возвращает HTML содержаший список со ссылками (привет wordpress), в зависимости от положения этого списка на странице, если ссылки в главной навигации - они идут в ряд, если в сайдбаре - то друг под другом. Можно учить api возвращать список с правилными классами, передавать дополнительный параметер и т.п., а можно не вы#бываться и сделать полностью на цсс, каскадом.

Одностраничный сайт, где нужно менять тему оформления на лету (например со светлой на темную) желательно с анимацией.

Ситуация когда на десктопе два элемента выглядят одинаково, а на телефоне по-разному.

И так далее, куча ситуаций где БЭМ кроме головной боли ничего не добавит.
Елси расскажете как правильно приготовить эти примеры - буду только признателен.

ПС
Кстати на сайте самого яндекса принципы БЭМа нарушаются только так.

[YemSalat]

Aingis:

Или просто добавить модификатор. БЕМ!

Как? Пример в студию. Так чтобы апи не трогать.

Главная Яндекса вам в пример.

Главная яндекса плохой пример. Я ж не сказал что на БЕМе это невозможно, я сказал что это более геморройно. У них страница полностью перезагружается и никакой анимацией там не пахнет (анимация перехода)
Плюс, как я уже говорил, у них на главной принципы БЭМа нарушаются только так - i.imgur.com/a28dQHu.jpg

Есть уровни переопределения БЭМ.

Я так и не понял как это решает приведенный мной пример - обьясните своими словами пожалуйста.

Что и требовалось доказать — вы не умеете его готовить.

Вы ничего кроме своей зацикленности на БЭМе не доказали.

[YemSalat]

Aingis: Вот простой пример изменения темы с анимацией, сделайте его на БЭМе, тогда будет о чем говорить. jsfiddle.net/12befua3/3

[YemSalat]

Aingis: Я вам кучу примеров привел где введение БЭМа будет не кстати. Я же говорю - вы зациклены.
Еще напомню что я ни разу не сказал что БЭМ - это плохо, только то что это бывает неуместно.
У вас все примеры в отрыве о реальных проектов, т.е. как дальше живет сверстанный вами макет - вас совершенно не волнует.
ПС
Что с моим примером на jsfiddle, вызов не принят? :)

[YemSalat]

Aingis: БЭМ - лишь частный случай модульного css, "классический" - это smacss

Вы хоть определитесь про что мы с вами говорим.

[Appp Zooo]

YemSalat: Aingis: https://www.polymer-project.org/ , 2way-databinding, angular, правильные паттерны и mvc(и другие) модели, и тд. а с выходом bower/npm... зачем нужен бэм? :D кроме яндекса его кто-то использует? поддерживаю YemSalat:

[Александр Софьин]

Arthur Ikeagold: Разве здесь речь идет о bem-tools? Тут дискуссия о методологии, и да, методологию используют много кто и где.

Answer 3

[hjk]

Посмотрите на htmlacademy — там неплохо написано про блочную вёрстку в том числе.