<!doctype confusedRant 😕>

Plot: we need to release our website in two weeks which holds at least a thousand pages. All these pages are manually migrated from the old website, which doesn't have a database. Current status: 650 pages/1000 are completed, 40 different templates need to be adapted. I'm alone on these templates, my colleagues create the pages and fill the new database

So I'm working on the templates a WebDev coded for our website on a licensed CMS, and had this decently simple html block that looks like a square and consisting of roughly this (Emmet style):

a.area > blockquote > strong.title + p

After adding another <a> element inside the p, I noticed that my <a> wouldn't display and bust the whole look of the square.

Just for more details, the CSS the dev made is ultra specified (meaning each element is too precisely "described" : div.class .child .child2 { /* styles */ } when it could be .class .child2 for example). Also, the templates he made need to be compatible with any "module" the website has, thus the need of this high specificity

So I fired up the DevTools to check what happened, and had:

Expected: a.area > blockquote > strong.title + p > a
Actual result: some new a.area were wrapping the <strong>, the <p> and the <a> I just added. The source code was not showing any of this but just the rules I initially wrote - the expected result

Wtf?! I thought the JS the dev made was adding elements. I disabled said JS, and bam, these a.area were still wrapping everything!! What black magic would add these stupid tags I never asked for.

So I went looking in the CSS files in case some wizardry was happening, but everything was OK.

I tried changing my structure, changing tag (swapping a.area to p.area or without .area), HTML just said "nope, have those please".

Eventually I rewrote my own module out of frustration after three quarters of an hour fiddling with this stupid "module". I hate losing time for such shenanigans and under a lot of pressure because of deadlines.

Still haven't figured why those <element>.area would wrap everything out of nowhere...