strelok011

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

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

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

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

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

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

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

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

Нет. Нельзя.
Результирующий html код может быть приготовлен на лету на стороне сервера или на стороне клиентского браузера.
Если на стороне сервера - будьте уверены, он будет разделен на отдельные фрагменты, снабжен условиями и бизнес-логикой, наполнением информацией в цикле из базы данных и проч. Найти статичный html, который раздается с сайта - в настоящее время практически не реально.