I know, i know, maybe i'm just too old and know shit about readability of code. Seizure coming.

What the fuck.

@Ranchu It's a Medium.com code. Maybe, maybe it is output of some compressor, who knows. Still...

@Lexter The fucking news service thingy?
Holy crap, if that's what web developers do I gotta reorganize my plans for the future.

That moment when you realize your code convention is not that bad after all haha

Where's the Problem? I 100% doubt that they wrote that manually. Doesn't Matter how shitty generated html looks 🤷🏻‍♂️

They are using one character classes to limit the download size. This is done by a minifier.

@Fast-Nop will LOVE this

Oi @fast-nop I have no words for this one

@jilano it's popcorn time

"No problems."

@C0D4 "Come forth, my children, for I brought the divine snacks."

@Codex404 I think it was actually made by a minified mathematician.

As if medium wrote that shit by hand. This is 100% some angular, vue or react output. And if you don't like how it looks, take a look into any binary and tell me if you like it.

@rutee07 not seen this particular stuff tbh.
But they "mark" elements by applying attributes with codes. As these are all classes, I guess this particular stuff came from some compiled scss/sass and those classes got called as short as possible (because a compiler can do so) to achieve what @Codex404 already pointed out: smaller size.

As there are actual ids in there - either I'm completely wrong and they built that shit by hand and compressed their css only OR they are complete morons (more probably) and gave stuff ids to reference them later in a way you shouldn't reference shit these days.

Medium is built upon React, then they're probably using something like StyledComponents for generating the css. Most items have a unique class to prevent from bad css inheritance, plus shorter classes is less bits and bytes travelling at lightspeed across the globe so we can read stupid articles.

Here's an example of a class from a component I made, "Button__StyledButton-sc-1mw7nek-0 iQHBGF". Totally unique, but it also has a reference to what component it's for. Throw it through a minifier would probably change it.

@nitwhiz Cannot speak for react or angular but vue isn' t doing this by default, if any of this class desert happens the developer behind this code has to be blamed, we use vue on a daily basis and classes HAVE to be to readable BEM in our code base.

This is generated dynamically, not by hand. There various of reasons. But for now I can think is prevent web scraping. Facebook does this. Prevent web scraping and prevent ad blockers from blocking their ads.

@dotperinch You would have a script which minifies the code before it is deployed.

It's not stored like this in their Git repo, this is the result of a deployment post-processing step.

Usually you also generate a sourcemap file which is included:

/*# sourceMappingURL=style.css.map */

This map file makes it possible to debug stuff in the browser, it tells the browser that

class="a b c"

is actually called

class="ridiculous-fat-purpling double-dotted-fringelines two-scoops-of-sparkles"

in the source code.

@rutee07 here is one http://emotion.sh

@PrivateGER @C0D4 That looks like Bootstrap idiocy on steroids AND high on crack. Even if the class names are generated programmatically, the markup is still a hallmark of divitis retardation, and also compressed classitis is still like a porcupine in one's pants gnawing on one's balls.

This is what is commonly referred to in school as 'div soup' and any serious web developer knows to use the semantic web (HTML5) to remedy it. This problem is old, at least a decade.

Oh yeah.. and there is likely obfuscation taking place as you can see from the class names. It's a way to protect business data of sorts.

this ain't bootstrap though.

the class names are almost alphabetical so either some minifier took place or, there's some crazy bastard out there with:

a{}
b{}
z{}
aa{}

as actual naming conventions or maybe using webpack's css loader with local class names.

https://github.com/webpack-contrib/...

But then someone would still need to map the .a{} back to .a_very_shitty_class_name{}

So I stand by my first idea, "some crazy bastard".

@C0D4 Yeck.. Webpack.. and those wonky mapper files.. I've used that back in the day when I was doing my internship for uni..

It's one of the reasons I came to hate professional frontend because they start introducing backend concepts on the frontend.
I like markup and simple JS logic, I don't like convoluted inheritance hell, webpack hell, JS hell, bower hell, grunt hell, etc. Just leave me alone and let me do some nice and clean design. Get away from me with making MVC frameworks out of the web. I love the web, but not for introducing huge complexity into it.

@CaptainRant I can't for the life of me see why css needs mvc, sass/scss sure I get it for teams or large sites, but this... this is just madness.

It's styling, it shouldn't take an hour or two to fix padding on an element, since you need to work out what that element is actually called, and then where that element has been defined in the mess of imports, correct it, rebuild everything, and hope it still works.

5 second task to any sane dev.

@C0D4 They realized they fumbled up and then they created yet another framework to 'remedy' it.
This framework is known as ReactJS and its idea is to replace MVC because it doesn't work for chat applications. Facebook had a technical talk about it, explaining all the flows and such.

I still don't like web frameworks; :P My educated interpretation on the convoluted way to edit something is that they probably want to tick all the -ility boxes (maintainability, scalability, etc.).

@bittersweet Thanks for the explanation, but we actually DO minify our JS and CSS but do not obfuscate our html markup through minification.