Как правильно сверстать такой элемент?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста как будет более правильней сверстать такой вот элемент ?

У меня были конечно мысли типа дать пунктиру absolute загнать его под текст, а тексту дать белый фон, но может есть какой либо другой вариант. Благодарю за ответ!

Comments

[Rustam Bainazarov]

Резиновый блок с фоном.

Border будет давать вам результаты, которые не будут похожи на этот макет.

Вот отсюда можно взять код фона на градиенте и приспособить:
https://codepen.io/nxworld/pen/oGwxaP

[Сергей Хлопов]

Рустам Байназаров, Благодарю

[tendkuh]

Рустам Байназаров, hr семантикой обладает, не надо так

[Rustam Bainazarov]

tendkuh, какой hr? О чём вы?

[Rustam Bainazarov]

tendkuh, а, вы про код выше. Это не мой код, я его скидывал как пример фона, а в примере он там играет роль разделителя. Думаю, автор вопроса бы и так не стал использовать hr тут.

[tendkuh]

Рустам Байназаров, вон ниже ктото уже стал:

[Rustam Bainazarov]

tendkuh, да и ладно, пофиг, если даже и тупо скопирует тег, семантика микро-порядка — ещё хрен бы с ней в данном случае.

Answer 1

[Виталий Першин]

Flex контейнер внутри которого блок с точками занимает все свободное пространство. При этом можно ему задать любые свойства и фон:

Comments

[Ankhena]

Если еще вместо div.item__dotted использовать псевдоэлемент и убрать обертку от кнопки, то вообще красота будет.

[Виталий Першин]

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

[Ankhena]

Виталий, например, какие?

[tendkuh]

Ankhena, с псевдоэлементом наверное так не поработаешь как с дивом

[Ankhena]

tendkuh, это аргумент для js, а не css

[tendkuh]

Ankhena, JS прикручивать ради такой мелочи?

[Ankhena]

tendkuh, что-то вы заблудились.
Вы сказали, что с псевдо не поработаешь как с дивом. Я ответила, что это касается только js. Для управления из CSS только одно различие между дивом и псевдо, но оно к вопросу не имеет отношения.

[tendkuh]

Ankhena,

Для управления из CSS только одно различие между дивом и псевдо, но оно к вопросу не имеет отношения.

Какое?

[Ankhena]

tendkuh, к нему не добавить еще псевдо, например, для хака с пропорциями.

[Виталий Першин]

Ankhena, Например любые. "Упрощать" разметку ради того чтобы вставить себе палки в колеса в будущем, ну так себе занятие.

[Ankhena]

Виталий, я попросила привести пример усложнений или расширения конструкции, где псевдо помешал бы и его пришлось бы переделывать на div. Любой.
А не пустые слова.

[Виталий Першин]

Ankhena, Тоже самое я могу сказать о вас. Покажите мне преимущество псевдоэлемента перед дивом?

[Ankhena]

Виталий, DOM узлов меньше, вроде это очевидно.
Это с технической стороны.
Со стороны семантики - точечки это украшение, а никакой не смысловой блок, а значит его не должно быть в разметке.

Тоже самое я могу сказать о вас.

Не можете. Я отвечаю на все заданные мне вопросы. А от вас уже 2 поста только вода.

[Виталий Першин]

Ankhena,

DOM узлов меньше, вроде это очевидно.

Полный бред, об этом я уже говорил:

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

-------------------------

Со стороны семантики - точечки это украшение, а никакой не смысловой блок, а значит его не должно быть в разметке.

Это еще большая глупость. Практически на любом БЭМапе представители от яндекса утверждают, что поисковики собирают совсем другую информацию и если вам нужны обертки или дивы используйте их и не пытайтесь ничего упрощать.

Кроме того резюмируя все выше сказанное можно сказать, что это даже не проблема верстки или стилей, это чисто сеошные закидоны, которые например в том же electron не будут иметь абсолютно никакого значения.

----------------------------------------------------------

А от вас уже 2 поста только вода.

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

Но раз вы сами не можете себе представить, давайте смоделируем пару ситуаций. Первая и часто встречающаяся, это кнопка, как вы выше написали:

и убрать обертку от кнопки, то вообще красота будет.

А что если нужно добавить еще одну кнопку, например сравнение. Мне для этого достаточно будет просто её добавить и при желании модифицировать обертку.
И сразу второй пример, тут на самом деле фантазировать должен дизайнер, но на вскидку реализация более сложных декораций. Ваши псевдо элементы в этот момент больше не рентабельны и придется уже делать по человечески со взглядом в будущее:

[Ankhena]

Виталий,
Конечно, есть разные задачи и для некоторых из них можно спокойно плевать на быстродействие, валидатор, доступность, ИЕ и еще на что-нибудь. Это верно, сама так делаю.

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

С псевдо для итема https://codepen.io/anon/pen/YbExxe
С псевдо для контента https://codepen.io/anon/pen/zQPoQM
С шириной и flex-параметрами можно играть как душа дизайнера велит.
Первый вариант более удобный для управления шириной текстового блока, поэтому второй, так, ради развлечения и показать ТС, что так можно.

[Виталий Першин]

Ankhena,

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

Каким образом использование блоков, которые появились вместе с самим языком разметки внезапно стали бременем?

Первый вариант более удобный для управления шириной текстового блока, поэтому второй, так, ради развлечения и показать ТС, что так можно.

Такие примеры приятно видеть, но все так же вы для чего-то ограничиваетесь одним элементом, который по своей природе уступает полноценному блоку. Линии можно и svg нарисовать и картинкой вставить, как и другие фигуры, но пример мой можно дальше модифицировать без каких либо затруднений, это позволяет в дальнейшем его легко поддерживать и переиспользовать. А это то что я хочу показать ТС, потому что вот это высказывание:

Если еще вместо div.item__dotted использовать псевдоэлемент и убрать обертку от кнопки, то вообще красота будет.

Является субъективным мнением. Как в целом и мое

[Ankhena]

Виталий, конечно, субъективным :) Это ш комментарий был.

Каким образом использование блоков, которые появились вместе с самим языком разметки внезапно стали бременем?

Не уверена, что напишу красивый литературный рассказ. Но попробую объяснить:
HTML предназначался для структурной и логической разметки текста. Чтобы программы могли нормально интерпретировать текст и передавать его на устройства вывода. Пи этом разные устройства по разному показывали этот текст, но тем не менее визуально отделяли заголовки от обычного текста в абзацах. Т.е. сначала текст, потом мы его размечаем: это просто текст, это таблица, это список и т.д. Это даже если не брать во внимание современные так называемые HTML5-теги.
И только совсем потом стилизация. И стилизация не является логической или структурной частью текстового документа. Она отдельна. Поэтому, всякие декорашки пишутся в стилях.
(На эту тему полно статей, думаю, вы их читали еще когда начинали изучать HTML)

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

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

Еще мне нравятся (пусть не на все 100%, но всё же) код-гайды некоторых вполне объективно уважаемых компаний. Например, Гугла https://google.github.io/styleguide/htmlcssguide.html
В нем даже есть прекрасная фраза о том, что менять HTML-документы и шаблоны всегда дороже, чем обновлять таблицы стилей и скрипты.

[Виталий Першин]

Ankhena,

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

В этом и вся суть, чтобы не пришлось ничего менять, нужно изначально делать структуру устойчивую и масштабируемую, после чего все остальные действия можно будет совершать на уровне стилей. О чем собственно и повествует БЭМ, который и гугл применяет в некоторых своих проектах. А вот то что вы предлагаете использовать псевдоэлементы в угоду полноценным блокам, как раз и приводит к тому, что в будущем это выйдет боком. Это я вам с первого комментария объясняю и хороший пример тому, обертка для кнопок, от которой вы советовали отказаться.

[RAX7]

Виталий,

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

А если завтра вам дизайнер скажет убрать это отточие и сделать полосатые строчки

spoiler

или просто отделить строчки подчеркиванием

spoiler

то вам придется менять структуру html.
По моему вы слишком далеко пытаетесь заглянуть в завтрашний день )

[Виталий Першин]

RAX7, Наверное вы не знакомы с методологией БЭМ, если структура будет принципиально отличаться, тогда мы будем использовать другой шаблон и не будем тратить время на модификации.

[Виталий Першин]

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

[Ankhena]

Виталий,

это какая-то таблица и реализована должна быть соответствующим образом

Этот блок может выглядеть как в вопросе на мобилках, а на декстопах как нарисовал @RAX7
Мы же не будем менять разметку из-за этого.

[RAX7]

Виталий, знаком, но БЭМ тут вообще не при делах, можете использовать любую другую удобную методологию CSS, и все равно в вашем примере придется поменять структуру.

если структура будет принципиально отличаться

так в том-то и дело, что структура не будет отличаться, отличаться будет только внешний вид.

тогда мы будем использовать другой шаблон и не будем тратить время на модификации.

и потратите время на создание другого шаблона.

@Ankhena
Конечно, есть разные задачи и для некоторых из них можно спокойно плевать на быстродействие, валидатор, доступность, ИЕ и еще на что-нибудь.

Данный случай не является чем-то особенным и можно спокойно сделать отточие псевдоэлементом, это до вас и пытаются донести.

[Виталий Першин]

Ankhena,

Этот блок может выглядеть как в вопросе на мобилках, а на декстопах как нарисовал @RAX7
Мы же не будем менять разметку из-за этого.

RAX7

так в том-то и дело, что структура не будет отличаться, отличаться будет только внешний вид.

А в чем собственно проблема? Изучаем тз и выбираем правильное решение. Чем тут псевдоэлемент то в выигрыше?)

@RAX7

Данный случай не является чем-то особенным и можно спокойно сделать отточие псевдоэлементом, это до вас и пытаются донести.

А можно сделать полноценный блок, который по своим свойствам, всегда более полноценен чем псевдоэлемент.

[RAX7]

Виталий, проблема в том, что вы пытаетесь

изначально делать структуру устойчивую и масштабируемую

но эта структура таковой не является, в случае изменений дизайна вам придется её менять и более того почему .item__dotted, может завтра он станет .item__dashed или .item__wavy

Чем тут псевдоэлемент то в выигрыше?)

Он не выигрыше, и ни в каких играх не участвует, он просто элемент декора и это все что от него требуется) Вы усложняете, там где это не нужно.

[Виталий Першин]

RAX7, Пример в ответе я быстро написал, чтобы помочь человеку понять принцип, пока на меня не напали со своими псеведоэлментами. В примерах в комментариях там название уже decor если не заметили.

Вы усложняете, там где это не нужно.

Я то как раз ничего не усложнял, я написал код, который меня не подведет. А вы занимайтесь чем хотите.

[tendkuh]

Ankhena, div думаю к семантике не имеет никакого отношения, это аббревиатура, переводится просто как division, но если было было div class="header" то ещё да, в погоне за чистым HTML кодом иногда можно придумать такую муть, что лучше просто наверное сделали-бы дивижн с классом, и всё было бы понятнее разработчикам,
код должен быть читаемым если его надо поддерживать, если вам надо один раз сделать, сохранить и забыть, то я вас понимаю, тогда можно "весь" декор и "псевдоэлементами" наверное клепать

И стилизация не является логической или структурной частью текстового документа.

Хочу посмотреть, как вы сверстаете чтото без доп. обёрток, или хотябы без флекс-контейнеров например

HTML предназначался для структурной и логической разметки текста. Чтобы программы могли нормально интерпретировать текст и передавать его на устройства вывода.

И тогда, и сейчас, о дизайнерах-верстальщиках думают в самую последнюю очередь

IMHO CSS и есть один большой костыль, который создали на скорую руку
P.S. Мне удобнее читать дивянку

[RAX7]

Виталий, да ни кто на вас не нападает =) просто легкая дискуссия перерастающая кажется в холивар)

[Ankhena]

RAX7, Ну побеседовали немножко ))))

tendkuh,
Есть подход программиста, утрированно звучит так: наоборачивать все в несколько слоев оберток для надежности.
Есть подход верстальщика, который помнит о том, что разметка это только структура документа, а не его визуальное представление.
Ну и различные комбо.

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

Но всё же предлагаю свернуть беседу и пойти спать.

Answer 2

[DanKud]

Если устроить дефолтная граница в точку (dotted) то можно просто сделать <hr> с этим бордером:

hr {
  border: none;
  border-top: 3px dotted #dbdbdb;
}

Comments

[Сергей Хлопов]

Благодарю

[tendkuh]

hr обладает семантикой, нельзя так делать