Решение проблемы конфликтов имен CSS классов в приложении на React с помощью webpack лоадера

Скрипты и советы | 18 декабря 2017 1 902

Уроки CSS на Хабрахабре, habrahabr.ru, ReactJS

Приветствую вас, друзья!


Началось всё с того, что я замыслил разработать кое-что так сказать для души. React приложение должно было рендериться поверх чего-то другого, например какого-то сайтика, встал вопрос того, что возможны конфликты CSS классов моего приложения с уже существующей инфраструктурой, ну я конечно же пришел к выводу, что нужно внедрить префиксы для каждого даже самого захудалого класса, ну или оборачивать все определения в класс моего главного контейнера, я все же выбрал префиксы. Но вскоре я устал от них, их получалось так много, что все это казалось мне пустой копипастой, и тогда я задумался над созданием своего лоадера для вебпака. В результате работа над ним переросла из мухи в слона, идеи переполняли меня и в итоге мой ум и руки сотворили монстра, который чуть было не вышел из под моего контроля.


Признаюсь за эти полторы недели его написания я дико устал думать, кодить и документировать сначала на английском, потом переводить с моего корявого английского на чуть менее корявый родной язык, скорее бы уже это закончилось. Зато теперь я знатный программист markdown и пользователь регулярок.

Читать дальше →
Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая. — Сделайте так, чтобы поиск по...

Подробнее
Работа с размерами изображений с помощью класса Uri в Joomla 4

Парадокс, конечно, но это возможно. Казалось бы, причем тут класс ядра для работы со строками url. Но именно он может...

Подробнее
Модальное окно на чистом CSS и JS

Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего...

Подробнее
[recovery mode] Тестирование 15+ виртуальных хостингов для Wordpress или как не исчезнуть из индекса Яндекса

Шаг 0: С чего все началось? У меня есть сайт-визитка на Wordpress. И в один прекрасный день скорость ответа сервера по...

Подробнее
HTML, CSS: какие символы можно использовать в названиях классов CSS

При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например,...

Подробнее
Очередной метод снизить объем SPA приложения (webpack)

Так уж случилось, что в последнее время мне приходится осваивать новые инструменты. Очередным таким инструментом стал...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями