Почему люди делают иконки в кнопках/ссылках используя абсолютное позиционирование?

Question

[imko]

Никакой практической надобности вопрос не несет конечно) Просто работая с чужим кодом очень часто вижу вот такие вещи и не могу понять почему именно их и почему у всех)
Иконка - декоратор поэтому псевдоэлемент хорошо. Но почему абсолют с паддингом? Это был какой-то менстрим каменного века? При чем часто вертикальная позиция не процент/центрирование а фиксированное смещение

Comments

[szQocks]

часто ссылок целая куча в навигации, и у всех у них бывают разные иконки, проще просто дополнительный класс задать этой кнопке, что бы отобразить ту иконку которую хочешь, профит в чём:
1 - если кнопке не задать дополнительный класс с иконкой, то её можно переиспользовать где угодно на сайте, если где-то повторяются шрифты например в других каких-то ссылках или кнопках
2 - нет лишних тегов в html для иконок

Но почему абсолют с паддингом?

попробуй спозиционировать без абсолюта)

[imko]

szQocks, а чего там позиционировать, отступ от иконки вправо и все

[Александр]

szQocks, Што. А как удобно работать с SVG-иконками через классы и менять им цвета, просто супер. Гриды и флексы с gap'ом для слабаков.

[szQocks]

Александр, ну если всю иконку цветом поменять, то я меняю через стили, так как иконку вставляю через маску

а если часть иконки, то ну желательно да svg вставлять прямо в html

[szQocks]

imko, хм хм, сомнительно

[imko]

szQocks, наоборот куда проще, расстояние между иконкой и текстом перестает зависеть от размера иконки и не нужно подгадывать паддинг при каждом изменении размера иконки

[Ankhena]

imko,
1. Ссылки/кнопки бывают многострочными. При инлайновом псевдо выглядеть это будет странно.
2. Флексы или гриды - хорошо, но имеют НО при наличии внутри текста какого-то тега (span, br). Чтобы гарантированно избежать этого, нужно оборачивать текст в span. <button><span>текст кнопки</span></button>

Итого получаем на чашах весов: абсолют против лишнего тега.

[szQocks]

imko, псевдоэлемент ? , ты же в вопросе про позиционирование псевдоэлемента спрашивал

[imko]

Ankhena, тэг конечно) абсолют потребует еще и всегда подсчитывать паддинг под размер иконки, хорошо еще если его просто так не было чтоб и его досчитывать)
Те что я видел ни разу не были многострочными и более того явно подразумевались как однострочные, так что предельно странная штука

[Ankhena]

imko,

так что предельно странная штука

Мое дело рассказать почему так делают. Устраивать холивар не хочу.

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

[imko]

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

[Сергей delphinpro]

Это был какой-то менстрим каменного века?

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

[Михаил Ливач]

imko, без абсолюта у тебя положение текста будет зависеть от того, есть иконка или нет. А если она не загрузилась?

[imko]

Михаил Ливач, ей можно задать размеры а не брать их от контента-картинки

[Ankhena]

Михаил Ливач,

без абсолюта у тебя положение текста будет зависеть от того, есть иконка или нет. А если она не загрузилась?

Если она не загрузилась, то осталось свободное место. Хоть абсолютом, хоть гридом. (И вообще пропал весь спрайт и сайту стало грустно)
Варианта со сдвигом три: вставлять иконку как img (промолчу), вставлять её как content в псевдоэлемент (а это совсем уж неудобно, потому что плохо регулируются размеры).

Answer 1

[Илья Родин]

Паддинг для того, чтобы иконка была как бы частью элемента, а не находилась отдельно. И такая практика не устарела, до сих пор так делают, но редко. Только вот надобности особой в этом нет

Comments

[imko]

Она и будет частью элемента если убрать и паддинг и абсолют