Если я вижу что-то интересное или новое на веб-сайте, мне нравится исследовать, как это было сделано. С первых дней существования Интернета «просмотр исходного кода» в браузерах был порталом для любопытных людей.

Теперь «просмотр исходного кода» упакован в набор гораздо более сложных инструментов, которые мы называем средства разработки. Теперь мы можем исследовать HTML, CSS и JS веб-страниц очень сложными способами.

Я обнаружил, что просматриваю веб-страницы через средства разработки отличный способ учиться и расти как разработчик. Всемирная паутина — ваша устрица.

Сегодня я увидел приятный шумовой эффект на фоне веб-сайта. Я хотел удовлетворить свое любопытство по провидению эффекта. Я предполагаю, что это был фильтр SVG.

Итак, я открыл средства разработки пытаясь извлечь код, чтобы воссоздать минимальный пример. Я просмотрел элементы в body и нашел svg который содержал filter. Моя догадка была верна! 🕵️

Затем, к моему удивлению, когда я изучил его стили в стиль панели, было много очень коротких классов. 😐 Они похожи служебные классы мне

Это делает несколько раундов копирования и вставки из стиль панель, чтобы воссоздать эффект! Возможно, просто быстрее напечатать те же объявления самому!

Вот так мой отдых выглядит в devtools.

просмотр веб-страницы в firefox devtools с выбранным элементом svg

Что бы вы предпочли прочитать в средства разработки?


Это проблема?

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

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

Если вы понимаете жаргон фреймворка, вам будет проще отличить стили от HTML. Вы читаете через class атрибут слева направо.

Длина CSS в стили теперь панель становится намного длиннее, поскольку каждое объявление свойства является правилом CSS. Это заставляет каждое объявление занимать 3 строки. Вам нужно прокрутить намного больше, чтобы прочитать все стили. Это определенно замедляет мое понимание, так как я не привык к этому.

Кроме того, меня интересует отладка. Вы подходите к этому по-другому? Отладка CSS сложна. Вы бы просто меньше использовали devtools для таких типов кодовой базы? Не могли бы вы сейчас отказаться от классов в HTML? Или вы бы отфильтровали стили на панели стилей, чтобы адаптировать там свойство?

Мне это не нравится, потому что это мешает моим экскурсиям по CSS! Это делает вещи более подробными.

Кто знает? Возможно, некоторые компании хотели бы, чтобы людям было сложнее имитировать части их веб-сайта, поэтому для них это может быть желанным побочным эффектом!

Думаю, это приспособления и катушки! 😁