strelok011

Для начала нужно определить для себя две большие разницы как-грится.
Что сейчас на ум пришло
1. есть нативные языки типа свифта, в которых толком верстки, близкой к вебу, нет и в помине
2. есть вариант Apache Cordova, PhoneGap - это фреймворки, позволяющие использовать веб-вью, т.е. показывающие обычную верстку в окошке "реального" приложения (чем-то напоминает PWA).
3. есть react native - фреймворк, ипользующий для бизнес-логики реакте (то бишь js), но визуальную часть и все взаимодействия с железом реализующий через нативные прокладки (т.е. написанные на языке, родном для оси). Из плюсов - можно делать сразу под андроид и под iOS, верстать очень похоже типа как для веба (не очень много "ньюансов"), из минусов - как только нативная библиотека скажет "нимагу", то вы попали :)
4. Ну и есть собственно PWA (Progressive Web Applications) приложения.

Везде свои нюансы, особенности и подводные камни. Бесплатный сыр, знаете ли...

В принципе - фронт-разработчику можно попробовать мобилки, но не следует ожидать предсказуемости и быстрого результата, особенно по началу.

Добавлю к первому комментатору несколько замечаний
1. Чтобы качественно верстать, надо знать, что происходит по капотом. Каскады в css - не просто так называются каскадами. Браузер парсит цепочку каскада начиная с самого правого класса. Отсюда и следствие, что выгоднее для производительности: если мы пишем .mybox div div a, то парсер берет все теги a на странице, проверяет первое условие вложенности в div, потом следующее... Если же писать .mybox .inbox .link - то выборка будет только элементов с указанными стилями.
2. Хороший стиль в верстке - когда следующий за тобой разработчик не проклинает тебя и всю твою родню из-за загадок и кривого кода. Писать надо лаконично и максимально понятно. Современные мощности позволяют не заморачиваться с длиной имен классов.
3. Верстать лучше всего исходя из предварительного анализа структуры страницы. Можно создать страницу с типографикой, вынести туда все универсальные переиспользуемые компоненты и блоки, оформить их так, чтобы ничего не ломалось при изменении вложенности. Все изменения базового компонента делать через класс-модификатор. Каскады стоит делать в случае, когда в рамках одного компонента прослеживается постоянная структурная и смысловая связь. Т.е. блок вывода анонса новости всегда имеет заголовок, дату, анонс и ссылку. Можно делать каскадом, можно делать по БЭМ прописывая все зависимости в именах классов.
Но если уж взялся использовать какой-то подход - важно пользоваться именно такой устоявшейся конструкцией.
Всех благ :)

Не очень понимаю - у Вас красные блоки должны растягиваться по ширине с постоянными отступами? или отступы должны увеличиваться, а блоки быть фиксированными?

Предложу использовать вместо flex grid https://xsltdev.ru/css/grid-guide/grid-5/

Чтобы решить это правильно и универсально - надо использовать js и вместо input - div content editable.
Натыкался когда-то на одном сайте на такое.
Индивидуально буквы не возможно оформить, кроме первой first-letter.
И для нормального оформления нужно заворачивать хотя бы в span.
Простое решение - ваше, методом подбора шрифта ).

БЭМ дает логику в верстке, если проект сложный и уникальный.
При этом он до продакшна может не доезжать в принципе.

Если разработка идет на базе готового фреймворка типа materializecss или бутстрап, то тут комбинирование классов основной прием, позволяющий пользоваться конструктором.

Кажется есть инструмент (я тут боюсь ошибиться, но рассказывали), который может превратить БЭМ (или любой используемый вариант) в набор атомарных классов по свойствам - компиляция многомегабайтного css файла превращает в файл около 300-500к (или и того меньше), в котором просто разложены основные свойства css на одно-двух буквенные классы.
В результате получаете небольшой размер файла стилей + обфусцированную верстку, в которой комплект свойств будет короче человекопонятного наименования стиля.
Это если топить за сокращение кода.

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

в модх есть масса плагинов. Используйте что нибудь вроде самой основной классики wayfinder. Или pdomenu, или любого другого )

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

i--gu.ru/wayfinder к примеру. Либо читать на сайте с документацией по modx