Форматирование генерированного HTML

Тезис: генерированный (и не только) HTML код надо форматировать, а не пускать в одну строку, т. е. вставлять те же символы разрыва строки.

С одной стороны и смотреться по Ctrl+U будет приятней (что важно), с другой - оградит от проблем с версткой в будущем. Последнее имеет смысл рассмотреть на конкретном примере.

Скажем, у нас есть следующий HTML код:

 

 

И следующие стили:

#wrapper {

width: 500px;

padding: 10px;

background: #FFC17B;

}

.sub {

width: 200px;

height: 100px;

margin: 5px;

background: #CE8965;

}

Как это выглядит:

Теперь назначим нашим внутренним дивам свойство
display: inline-block
, а для враппера установим
text-align: justify
:

#wrapper {

width: 500px;

padding: 10px;

background: #FFC17B;

text-align: justify;

}

.sub {

width: 200px;

height: 100px;

margin: 5px;

background: #CE8965;

display: inline-block;

}

Все как и должно быть, внутренние дивы стали выравниваться по ширине.

А теперь сделаем все то же самое, но вот для такой верстки, которую обычно получают генерированием HTML без надлежащего форматирования:

 

 

При обычном выводе блоков все точно также:

Снова применим стили
display: inline-block
и
text-align: justify
, как и в примере выше:

Так, а куда выравнивание-то подевалось?

А выравнивание у нас и не может сработать, потому что для выравнивания инлайновых элементов их должно что-то разделять (как пример, чтобы выравнять текст, слова должны быть разделены пробелами). У нас между дивами разделителя нет, ни пробела, ни символа перехода на новую строку.

И вот такие вот мелочи могут сильно отъесть время и попортить нервы. Когда вроде как все должно работать, а не работает. Смотришь исходный код по привычке через DevTools, все нормально. А то, что там уже распарсенный код, забываешь.

Кстати, стоит отдать должное большинству WYSIWYG'ов и прочих пост-обработчиков HTML'ля (та же самая фильтрация вводимого текста в Drupal, опция "Исправлять неправильный и обрезанный HTML"). В них это все предусмотрено. А вот когда добираешься до самописа на базе порочного опыта т. н. "программирования мышкой", начинаешь наступать на грабли, из раза в раз. Причем на самые что ни на есть детские. Банальная верстка же.