Как не писать г-код html?

Question

[JyriG]

Привет!
Я верстальщик-самоучка, учился верстке через слитые курсы и ютюб-уроки.
У меня вызывает огромное подозрение что из-за отсутствия наставников я пишу (извините за выражение) г*вно-код..
По CSS вопросов нет - там просто соблюдать "чистоту". Но есть ли статьи/видео о правилах написания html-кода?

Заранее благодарю)

Comments

[alvvi]

По CSS вопросов нет - там просто соблюдать "чистоту".

Странное утверждение, в CSS наговнокодить в 10 раз проще всякими !important и вырвиглазным каскадом.

[Виолетта Морозова]

Если самооценка ни к черту, ты всегда будешь сомневаться в качестве своего продукта/кода

[JyriG]

Виолетта Морозова, Тут-то поспорить трудно)

Answer 1

[Алексей Чипига]

По CSS вопросов нет - там просто соблюдать "чистоту"

Да как бы ни так, по моему лично мнению, касательно html, достаточно следовать этим styleguid'ам
От разработчика bootstrap
Опять же соблюдать DRY в чистом html сложно (6 одинаковых блоков по структуре), по этому как советуют выше присмотритесь к jade и другим шаблонизаторам (особенно к php, волею судеб придется работать с ними).

Ну и чтобы быстрее придти к осмысленности, стоит взглянуть на БЭМ хотя бы на уровне именования классов.
nicothin.github.io/idiomatic-pre-CSS

Comments

[Монти Пайтон]

Используйте мягкие отступы с двумя пробелами — это единственный способ гарантировать, что ваш код будет везде одинаково выглядеть.
Вложенные элементы должны иметь отступ (два пробела).

не в теме ещё, только учу CSS

не привык ставить 2 пробела для отступов, всегда казалось намного проще один раз нажать на табуляцию, но как потом другим выкладывать этот код, прогонять его через какойто gulp.js слышал там вроде есть чтото похожее, или вообще все сразу пользуются препроцессорами?

[Анатолий Медведев]

не привык ставить 2 пробела для отступов, всегда казалось намного проще один раз нажать на табуляцию

Зайдите в настройки своего текстового редактора уже...

[IIIu6ko]

Ostin1, Во всех современных и более-менее функциональных редакторах есть опция, которая эмулирует сколько тебе нужно проблевом по нажатию таб. Хоть один пробел ставь по табу, хоть четыре.

Советую почитать codeguide от html академии
codeguide.academy/html-css.html

И поставить себе в редактор htmlhint. Там даже в гайде готовый конфиг дают.

Answer 2

[Кирилл]

попробуйте почитать про методологию БЭМ

Comments

[JyriG]

Я БЭМ:ом пользуюсь, это же основы основ)

[Kovalsky]

JyriG, почему основы основ, БЭМ это только один из дюжин десятков существующих подходов к организации CSS+HTML.

Answer 3

[Veronika]

Валидатор в помощь.

Answer 4

[Монти Пайтон]

пользоваться наверное препроцессорами

Answer 5

[kn1ght_t]

соблюдайте семантику и руководствуетесь здравой логикой, больше для написания нормального html знать не надо
еще можете попробовать pug js, попробуйте делать ваши компоненты более реюзабельными (в пределах разумного) в виде миксин