I'm leaving my job.

That had already been decided when I learned that the only other front end guy at the company put in his two weeks notice. I immediately decided that I was morally obligated to put in my 4 months notice to give the company enough time to find a replacement (because, contrary to the beliefs of some programmers, front end plays a critical role in web dev).

With only 2 weeks left, I was put on his project to do some "simple design work".

Jesus christ in heaven alive and dead...

I've never in my career seen CSS with such an intense level of specificity -- nobody on that team should have ever let that code get so out of control.

I've spent the past week cursing, walking out of the room, whispering "I can't believe you've done this", ranting to non-developer friends.

Here's an example: the application has a panel used all over the place with a header and a body. Every Single View has it's own duplicated panel, each with its own unique class names and CSS. And that's just one element.

Every view has hundreds of lines of duplicated CSS. Every button, link, list, all with unique styles.

To any junior developer reading this, please hear me: Write one block of CSS for any element that will be reused. DO NOT duplicate your code when it can be used over and over.

/rant

It really irks me when I see 'web developers' and 'front-end developers' write CSS like a bunch of first-timers. Not considering hierarchy, specificity or even following a proper naming convention (who the fuck mixes camel case AND lowercase for class names?!) It's worse when you already have Sass or SCSS and they still write their style rules WITHOUT PROPER NESTING or keep using !important like it was a goddamn semicolon.

This is fucking basic shit for a web or front-end developer, and God help you if I ever conduct your technical interview and decide to ask you on a whim to write an Angular app WITHOUT USING BULLSHIT SYSTEMS LIKE CLARITY, ANGULAR MATERIAL OR BOOTSTRAP for your UI. But if you can explain to me the pros and cons between using CSS grid and flex, I'll be fucking impressed.

I wish these 'UI experts' I keep encountering would learn to build an optimal static site without a fucking framework or build manager before doing advanced shit, for the love of Jeebus.

I use WordPress for my clients. No prob there. I hate it when I use someone else's paid theme and I have to beat my head against the CSS because they've used a lot of #id and !Important in the main css file.

Makes a child theme almost useless.

<!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...

Rushing to get a feature completed for a client presentation tomorrow has turned my Sass sheets into a nightmarish hellhole of classes, nesting, and questionable specificity. This is taking a huge liberty with "if it works, ship it."

Modern Web Developer
(To the tune of "I Am the Very Model of a Modern Major-General" from Gilbert and Sullivan's "The Pirates of Penzance")

I am the very model of a modern web developer
I’m quite fluent with JavaScript; An HTML whisperer
My code is clean and elegant, I genuinely innovate
And even know my way around a Promise and async / await

I’m very well acquainted too with matters vector graphical
I understand why SVG coordinates seem magical
And even without Photoshop I elegantly can produce
A mockup or a logo in most any format that you choose

[Chorus]
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose

I'm quite adept at ES6 expressions like destructuring
I know the ins and outs of functional reactive programming
In short, in matters browser-based or Node.js if you prefer
I am the very model of a modern web developer

[Chorus]
He is the very model of a modern web developer

I know our mythic history, the humble start, the browser wars
I know why Douglas Crockford fought the battle over ES4
The World Wide Web Consortium and Ecma International
My knowledge of our legacy is truly supernatural

With LESS and SASS and CSS, designing for mobility
I’ll perfectly apply the right amount of specificity
From custom fonts and parallax to grid and flex and border-box
I know most every tip and trick both common and unorthodox

[Chorus]
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox

And when it comes to lazy loading, bundling up and splitting code
There’s nothing quite like Webpack, which of course is built on top of Node
Considering my resume, I’m certain that you will concur
I am the very model of a modern web developer

[Chorus]
He is the very model of a modern web developer

When new frameworks and libraries emerge I must be ravenous
And gobble up the hot new thing, my appetite is bottomless
React and Vue and Angular, Immutable, RxJS
The list will be outdated long before I'm finished singing this

My pull requests rely on multitudinous utilities
To help me lint and test and build, a deluge of analyses
And every single day there are a hundred thousand more to learn
The web is going through an irresponsible amount of churn

[Chorus]
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn

This pace is agonizing! Code from yesterday is obsolete!
The speed of innovation is enough to knock me off my feet!
It's happening too fast! I can’t keep up! I’m tired! It’s all a blur!
I am the very model of a modern web developer!

[Chorus]
He is the very model of a modern web developer!