Как лучше сверстать?

Question

[Roman Egliens]

как бы вы сврстали этот отрезок? (вокруг / 2 пробела)
1)
 
2)
<pre>
3)

<div>
   <span>сон</span>
   <span>ужин</span>
   <span>завтрак</span>
</div>

div {
	font-size: 19px;
	margin-left: 32px;
	text-transform: uppercase;
}

span {
	margin-right: 17px;
}

span:after {
	content:'/';
	margin-left: 17px;
}

span:last-child:after {
	display: none;
}

Моё мнение, что 3тий вариант самый грамотный, но будет ли сильно большой ошибкой если я использую 2ой вариант?

Answer 1

[Талян]

4) картинкой

третий конечно.

Первые два варианта - варианты курильщика вообще, они у здорового человека в голове даже не появились бы.

Comments

[Roman Egliens]

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

[Талян]

egrom92, если это меню динамическое, и подразумевает когда-нибудь добавить туда какой-то пункт, то придется лезть в HTML код.

Если захочется поменять стиль, сделать меню вертикальным для мобилок - то же самое.

Если это у вас сайт-визитка на HTML и страница никогда не будет меняться то как хотите делайте тогда.

[Roman Egliens]

Анатолий, спасибо тебе, я теперь понял в чём разница))

В моём случае это простой информационный текст. Было бы это менюшка, то да, я бы сделал через ul>li

Answer 2

[profesor08]

Правильно будет задать вот так (код ниже), потому что у тебя будет больше возможностей для дальнейшей поддержки. При изменении меню в любом случае генерируется его html, а значит число тэгов не имеет значения. Разделитель можно будет менять, добавлять, убирать, без необходимости редактировать стили и собирать все заново, все делается на стороне бэка. Задав через псевдоэлементы ты обречешь себя мириться с их недостатками и потеряешь возможность быстро что-то изменить.

<div>
   <span>сон</span>
   <span class="separator-slash">/</span>
   <span>ужин</span>
   <span class="separator-dot">.</span>
   <span>завтрак</span>
</div>

Comments

[Никита Мелихов]

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