Как верстать чтобы код не был похож на кашу?

Question

[shcherbakFourteen]

Всем привет. Недавно начал вкатываться в верстку, и столкнулся с проблемой, что когда верстаю более менее большой сайт - то код похож на непонятную кашу в которой невозможно разобраться. Когда сам возвращаюсь в предыдущие, уже сверстаные секции чтобы поправить какую то мелочь, у меня просто вскипает башка, бывает что-то не там поменяю и вся секция идет по одному месту. Какие есть решения этой проблемы, какими секретными решениями пользуются гуру верстки? Мне не верится что это у всех так, так как же научится верстать ГРАМОТНО?

Comments

[Виктор Волков]

я комнечу, учу PSR-ы и придерживаюсь "своих логичных правила" (ну типа не пихать в цикл функцию, если нужен ток ее результат и проч...). но с версткой редко сталкиваюсь пока... ну и конечно было просто вторым пришествием открыть для себя мир MVC в php)) интересно, что-то подобное есть в HTML?...

Answer 1

[Shadowman69]

Я не гуру верстки, поначалу тоже была такая проблема, я решаю ее двумя способами:
- каждую секцию(блок) сайта я отделяю отступом с комментарием, это делаю как в html. так и в сss, так намного легче найти где что есть. Комментарии зеленым отмечаются и потому хорошо видно где какой блок, я вообще то комментариев не жалею, и выглядит оно по-людски и читабельно, а не все в одну кучу.
- даю осмысленные названия классов, да как сказали выше можно использовать БЭМ, лично я себе придумываю свои классы, но их логика понятная и простая, напр. service-container, service-cards, card-title, card-content, то есть слова "контейнер", "тайтл", "контент всегда повторяются в верстке, меняется только название секции.
И еще к тому же перед началом верстки я прохожусь по макету и в начале стилей выношу классы со стандартнимы стилями заголовков, абзацев, ссылок, чтоб избежать повторения кода, в итоге цсс-кода становиться намного меньше и в нем легше разобраться. И в общем не отчаивайтесь это в принципе нормально, что Вы открываете файлы для правок и сначала сложно разобраться. потому что забывается как это версталось, у меня тоже так. я перед тем как внести правки сначала 5 минут изучаю структуру блока. так Вы сведете к минимуму съежание блоков. Ну и про отступы от левого края тоже не забывайте, это важно, их не зря придумали)

Answer 2

[Олег]

БЭМ

Answer 3

[Sanes]

Как в популярных классических фреймфорках. Twitter Bootstrap, Uikit и т.п.