@DaniLaFokc

Как реализовать динамическую генерацию CSS классов на PHP?

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

Допустим у нас есть такая HTML страница:
<div class="article">
    <div class="image">...</div>
    <h1 class="title">...</h1>
</div>

После выполнения скрипта должно получиться нечто подобное. При этом важно, чтобы CSS стили были сохранены.
<div class="06fe">
    <div class="414b">...</div>
    <h1 class="b3a4">...</h1>
</div>


Как я представлял себе решение задачи:
  • Парсю нужный HTML файл и получаю из него список всех используемых CSS классов
  • Парсю файл стилей и ищу в нем вхождения ранее найденных классов
  • В случае нахождения генерирую новое имя для класса. Также заменяю его в HTML
  • Сохраняю новые HTML и CSS файлы. Оригиналы файлов также куда-то складываю
  • Задача крутится в кроне и выполняется каждый час


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

  • Чем парсить HTML и как получить список классов?
    Нашёл специальную библиотеку DiDOM. Но она больше подходит для вычленения какой-либо информации. Мне лишь нужно получить массив используемых классов. Подойдет ли мне эта библиотека или есть более легкий способ?
  • Как искать нужные классы в CSS?
    Смог найти библиотеку sabberworm/PHP-CSS-Parser. Но не смог найти метод поиска определенного класса. Нужна ли мне вообще эта библиотека или можно ограничиться простым поиском-заменой?
  • Как быть уверенным, что после генерации не будет двух одинаковых классов?
    Думал либо просто использовать для имен достаточно длинную строчку из случайных символом, чтобы минимизировать вероятность генерации одинаковых значений. Достаточная ли эта мера или мне необходимо запоминать имена классов?

Буду благодарен за любую помощь. Если у вас есть опыт реализации подобных систем, то пожалуйста поделитесь знаниями. Заранее спасибо :)
  • Вопрос задан
  • 191 просмотр
Пригласить эксперта
Ответы на вопрос 6
@JohnDidact
Нуб во всём
Не обдумав, в голову легло, возможно глупое, но решение:
Нахрен не парсить HTML, а просто вставлять в HTML php код, вида <?=$style['image'];?>, где $stule - массив с твоими классамм, в котором ключ - имя класса, значение - его замена (414b). Этим же массивом проводить каждый час замену в css, типа strtr($css_content, $style), где $css_content - строка, содержащая правила для стилей.

На счёт генерации новых имён. Можно на каждый ключ генерить имя, предварительно проверив in_array($new_name, $style) на наличие в массиве имён нового имени. Предварительно нужно создать массив имён с ключами, равных имени класса… Иначе, заполнить два массива, типа
$names = array('title', 'images', 'article');
$codes = array();
$codes[] = '…'; // генерим и проверяем на отсутствие такого (хотя, по идеи, такого же быть не должно… но мы - параноики)
// и ещё так два раза (кол-во зависит от кол-ва значений $names ну или просто пустить это в цикл count($names) раз)
затем комбинировать их
Ну это так… набросав на коленке, так сказать.

Или из цикла заполнять значениями массив $style, предварительно проверяя его, типа
# Хотел написать код, но со Смарта многовато писанины, тем более кода)) но, думаю, суть ясна


Я бы этим не занимался) неоправданные операции, на мой взгляд. А если бы и пришлось, то делал бы иначе, наверное. Как? Не знаю пока что))
Ответ написан
profesor08
@profesor08 Куратор тега CSS
https://styled-components.com/ - прям на главной редактируй код и смотри что происходит с кнопками. Там же ты поймешь, что твоя задумка гораздо сложнее и ее решение лежит в другой плоскости, и требует специальной подготовки кода и подхода к разработке, основанном на компонентах. PHP же тут просто мимо проходил и его тегом зацепило.
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
Отложенная загрузка + intersectionObserver + JS-фреймворк + адовые анимации в ответ на fetch тебе в этом больше помогут, чем подобные извращения. В снижении риска быть спарсенным. Да и оптимизируешь возможно слегонца.
Ответ написан
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
зачем парсить html когда ты его сам же и генерируешь
Ответ написан
@strelok011
Не довелось применять, только слышал о новом подходе в использовании css, причем эта технология позволяет очень значительно сжать итоговый файл со стилями (на больших проектах).
Суть такова - проект создается в классическом произвольном режиме, именуете классы как удобно, на выходе компилятор разбирает все классы, приводит к набору базовых атрибутов. То есть на выходе будет стиль вида 'a ab sc o', каждый класс отвечает только за один атрибут. Их конечное и не очень большое число, выгода на больших проектах очевидна, так же смысл парсить результат сводится к 0. В итоге, если не ошибаюсь, размер css файла порядка сотни кб, тогда как на крупных проектах может достигать не одного мегабайта, размер html разметки остается вполне вменяемым.
Годится только для продакшн-релиза.

P.S. Источник не подскажу.
Ответ написан
@KingstonKMS
full-stack web developer
Ну все зависит от того, какая структура проекта, большой или нет, много ли зависимостей от сторонних стилей типа бутстрапа.
Генерацию на лету не рассматривали? Если используется фреймворк, то не думаю, что это такая сложная задача.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы