Дмитрий, ага, ну, собственно, так не выйдет. Если Вы всем элементам делаете visibility: hidden то это всё равно не убирает их из потока и соответственно, влияет на то, где будет расположен блок, которому Вы делаете visible.
А так же на пустое место снизу.
Блоки которые напечататься не должны - нужно скрывать display: none.
Так а как Вы иначе хотите выделять?
Чтобы что-то выделить нужно это обернуть в тэг.
Чтобы обернуть в тэг, нужно знать как минимум индекс, с начинается искомая подстрока и длину подстроки.
То есть Вы проходитесь по всем элементам, находите там свою подстроку и заменяется по индексу подстроки просто текст на span\mark.
А element, который в примере на SO это все ваши строки. То есть Вы их перебираете и в них заменяете.
godsplane, современные инструменты не подскажу, так как не упарываюсь до такой степени в работе. Но можно погуглить бэм стэк и типа того. Может завтра как за компом буду найду что то
godsplane, ну, с проектом будет как ни странно - чёткая структура. Не совсем понимаю о чем вы переживаете.
С проектом без структуры все то же самое, только ещё и полная мусорка с сильной связностью кода который сложно поддерживать
Зачем, если можно сразу импортировать из фигмы всё в одном файле?
К слову, с точки зрения оптимизации градиентный фон можно нарисовать на css - сильно облегчит картинку.
В скинутой фигме пчёлки и мёд итак одной картинкой сделаны.
подумал слишком просто будет
Так Вам шашечки, или ехать? Зачем усложнять и из простого делать лажу с отрицательными маргинами?
плюс команды такие как z-index еще не проходили
Для предложенного, да и описанного Вами же решения z-index не нужен.
Ну и даже если делать надпись "honey" отдельно, то z-index тоже не обязателен. Можно управлять порядком элементов на основе их порядка в DOM.
не правильно делать это флексами.(в подходах к вёрстке конечно нет прям супер строгих правил, если браузер отрисовывает Вашу вёрстку как надо и это решает бизнесс задачу, но всё же).
Нет ничего не правильного в том, чтобы использовать свойства для позиционирования для... позиционирования.
Можно не объединять эти картинки в одну, а воспользоваться множественным фоном и спозиционировать фон с пчёлами как нужно относительно фона с мёдом.
Вы так и не показали как выглядит задание. Вы показали как выглядит макет.
1) А почему нельзя объединить картинки в одну? Зачем отдельно мёд, отдельно пчёл?
2) Зачем тут вообще flex?
3) Изображение скорее фоновое, чем контентное.
