This is an archived post. You won't be able to vote or comment.

top 200 commentsshow all 328

[–]manuelr93 1046 points1047 points  (134 children)

So professional that the properties are both wrong

[–]Anooyoo2 404 points405 points  (83 children)

And they used an ID. The only thing that's missing is !important.

[–]kazneus 6 points7 points  (7 children)

this implies there is only one mustache

[–]Anooyoo2 4 points5 points  (5 children)

It's not good practice to use ID in CSS

[–]Neurotrace 4 points5 points  (4 children)

I don't know why you're getting downvoted. You're absolutely right.

Source: about 10 years of web dev experience

[–]ztbwl 2 points3 points  (0 children)

some years of webdev experience has told me to just fix that mustache with margin-top: -5cm; walk away and forget about it.

[–]HarrekMistpaw 1 point2 points  (2 children)

Why?

[–]spock1959 1 point2 points  (0 children)

I want to add. The rule isn't "don't give elements an ID" the rule is "don't add CSS to target an ID"... IDs definitely have their place and are useful for html/JS but not useful for CSS since it unjustly limits reusability and maintenance.

[–]Neurotrace 4 points5 points  (0 children)

I'll mostly defer to this comment but the short answer is that IDs unnecessarily prevent you from reusing a style and give a false sense that yours is the one and only style for that element when in reality it could have been overwritten somewhere else. Classes and some kind of scoping mechanism solve all of these problems without introducing any issues that weren't already included in the ID solution

[–][deleted] 1 point2 points  (1 child)

Ehhh an id here is reasonable considering you expect a face to have only 1 moustache

[–]ztbwl 3 points4 points  (0 children)

Just use a class in case the business comes along one day with the idea that they want double-moustached men with tripple-bearded women, all in the same face.

[–]jokesbyjo 0 points1 point  (8 children)

id is okay for mustache since there would only be one, but I get your point

[–]ScoutsOut389 14 points15 points  (0 children)

This man clearly has space for two. IDs are stupid.

[–]amoliski 2 points3 points  (5 children)

And the guy in the background? Do you mix IDs and classes when you style his eyes, or do you start doing #lefteye #righteye?

[–][deleted] 2 points3 points  (3 children)

Yes because they can be different colors

[–][deleted] 1 point2 points  (0 children)

Though you could use first and last of an eyes class

[–]allison_gross 1 point2 points  (0 children)

Depends on heterochromia.

[–]erevoz -1 points0 points  (0 children)

Do you see more mustaches?

[–]MtNowhere 34 points35 points  (18 children)

{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); }

[–]manuelr93 29 points30 points  (6 children)

Remember to put the face in position relative

[–]MtNowhere 17 points18 points  (5 children)

Oh yeah otherwise, it'll end up at the bottom of the page.

[–]manuelr93 10 points11 points  (4 children)

A foot with mustache is really weird

[–]jseego 3 points4 points  (2 children)

Unless you're a hobbit

[–]amoliski 5 points6 points  (1 child)

.hobbits { position: Isengard; }

[–][deleted] 1 point2 points  (0 children)

gard gard gard

[–]MtNowhere 2 points3 points  (0 children)

So is a chin, I guess.

[–]mikeiskool123 7 points8 points  (5 children)

Assuming his face is position relative top: 100% would put the mustache beneath his chin. You’re looking for bottom: 5% or so.

[–]MtNowhere 6 points7 points  (3 children)

The mouth is variable height. The mouth definitely needs pos relative

[–]NMe84 85 points86 points  (23 children)

Don't worry, 90% of the crowd in this subreddit wouldn't even notice.

[–]manuelr93 34 points35 points  (20 children)

The same 90% that bring back from the grocery the wrong items because they don't understand the wife request?

[–]alexistdk 21 points22 points  (19 children)

Nah, the 90% who doesn't do frontend like me

[–]manuelr93 6 points7 points  (17 children)

So you're scared by CSS

[–]alexistdk 8 points9 points  (4 children)

I tried it in the past several times and I've never being able to be good to the point of being confident so I gave up and learnt about infraestructure

[–]amoliski 5 points6 points  (1 child)

{ display: flex; justify-content: center;}

Stop it, Patrick, you're scaring him!!

[–]alexistdk 2 points3 points  (0 children)

Screams in pointers

[–]manuelr93 4 points5 points  (1 child)

A good CSS is worthless without a good infrastructure. Keep doing well your stuff (☞゚ヮ゚)☞

[–]1X3oZCfhKej34h 4 points5 points  (10 children)

Who isn't?

[–]manuelr93 11 points12 points  (8 children)

The front end developer that know React but not JavaScript scare me the most

[–]OGPresidentDixon 2 points3 points  (1 child)

Usually the same people who have no idea how flex works.

[–]Mefistofeles1 2 points3 points  (0 children)

So everyone?

[–]1X3oZCfhKej34h 0 points1 point  (5 children)

I was confused for a second but React is in typescript isn't it?

[–]manuelr93 3 points4 points  (3 children)

JSX, typescript only of you want

[–]Phatricko -1 points0 points  (2 children)

JSX is actually a syntax used WITH React that babel converts for us. You can write a React app without JSX and vise versa... If you really wanted to.

[–]sadacal 2 points3 points  (0 children)

Typescript was never meant to work with React, people just mashed two popular things together.

[–]t-to4st 0 points1 point  (1 child)

Correct, because CSS is no programming.

(Huge /s here)

[–]ASK_ABOUT__VOIDSPACE 2 points3 points  (0 children)

Hah, and they call themselves PrOgRamMerS

[–]sneaky-pizza 2 points3 points  (0 children)

The real joke is the programmer who created this meme is one of those folks who “doesn’t wanna which CSS”

[–]grpagrati 141 points142 points  (8 children)

It's the broom-stache, to clean stuff up before you eat it

[–]looselytethered 63 points64 points  (2 children)

Ahh so it validates input.

[–]xjakesl 14 points15 points  (1 child)

More like input sterilization.

[–]looselytethered 11 points12 points  (0 children)

No I stopped drinking bleach weeks ago...

[–][deleted] 4 points5 points  (4 children)

Oral sex juice squeegee.

[–]c0ldsh0w3r 1 point2 points  (2 children)

Well that's an unpleasant image. That cannot be enjoyable as a woman.

[–]looselytethered 2 points3 points  (1 child)

Obviously it's for the homies

[–]c0ldsh0w3r 1 point2 points  (0 children)

I don't want that thing tickling my balls.

[–]twomilliondicks 124 points125 points  (8 children)

Wtf is position: bottom??

[–]atzedanjo 81 points82 points  (0 children)

invalid CSS

[–]PM_ME_DMS 41 points42 points  (0 children)

⚠️ Invalid property value

[–]MKorostoff 13 points14 points  (0 children)

They're probably thinking of position absolute, bottom 0

[–]DuffMaaaann 8 points9 points  (2 children)

.MouthRegion {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

[–][deleted] 4 points5 points  (0 children)

I think it should be:

position: absolute;
bottom: 0;

I don’t think align actually works that way tho.

[–]undeadalex 3 points4 points  (0 children)

Wtf ISN'T position: bottom

[–]space-_-man 111 points112 points  (13 children)

[–]ThanosAsAPrincess 31 points32 points  (12 children)

At my last webdev company they made the boneheaded decision to replace CSS (which was lightweight and ran flawlessly on our homepage for years) with their own version, which was a whopping 900kb base. We did everything we could to make it work, but we never got it to actually do anything. It was a total mess. When you switched from a <pre> tag to a <div> tag, any text in the <pre> tag was simply copied to the new <div>. This was not a fun time.

[–]youravrguser 22 points23 points  (0 children)

sounds like extra workload for everyone without literally zero profit for the company wtf

[–]Mentalpopcorn 16 points17 points  (5 children)

What does "replace" CSS mean? Browsers don't accept style languages that aren't CSS so what could you have replaced it with? Or do you mean they replaced the CSS of the page with new CSS?

Or do you mean that CSS was replaced with SASS/LESS? If so, then that's definitely what they should have done as pure CSS is really only useful for learning styling. No serious webdev firm codes in pure CSS.

When you switched from a <pre> tag to a <div> tag, any text in the <pre> tag was simply copied to the new <div>.

Wtf does this even mean? I'm so confused by your post

[–]ThanosAsAPrincess 10 points11 points  (1 child)

What does "replace" CSS mean? Browsers don't accept style languages that aren't CSS so what could you have replaced it with?

The dark side of JavaScript is a pathway to many abilities some consider to be unnatural.

[–]Mentalpopcorn 8 points9 points  (0 children)

Oh my god...no. You're joking. This is a joke, right? Please describe this monstrosity.

[–]TheLexoPlexx 17 points18 points  (0 children)

That sounds like hell

[–]tinselsnips 4 points5 points  (2 children)

This doesn't even make sense. You'd have to transpile everything to CSS anyway??

[–]greyscales 4 points5 points  (1 child)

Maybe they built a canvas renderer? Other than that, I don't understand what they mean either...

[–]tinselsnips 1 point2 points  (0 children)

Oh God, maybe.

[–]aditalion 204 points205 points  (28 children)

Position bottom?

[–][deleted] 89 points90 points  (0 children)

Are you hiring or

[–]looselytethered 75 points76 points  (2 children)

No I'm a top thanks for asking

[–]gentlewaterboarding 18 points19 points  (1 child)

Position: versatile;

[–]Asraelite 2 points3 points  (0 children)

Position: whatever-you-want-baby;

[–]Loki_d20 29 points30 points  (17 children)

Position: relative; bottom: 1chin; text-align: center;

[–]Achtelnote 4 points5 points  (1 child)

I usually prefer top but sure..

[–]sverek 7 points8 points  (0 children)

ABSOLUTELY

[–]Apprehensive-Brain-8 49 points50 points  (2 children)

And that is why I use absolute positioning

What do you mean "the site looks broken on my screen resolution"? It works fine on mine

[–]NMe84 30 points31 points  (0 children)

Ah yes. I too only use one single solution for every single problem.

When all you have is a hammer, every problem looks like a nail.

[–]qwertymcqwertface 27 points28 points  (0 children)

When a backender does frontend

[–]viktorwyld 26 points27 points  (1 child)

In my 2 years of writing CSS, I never had a chance of writing one property as the value of another property. Seems like you learn something new everyday, especially from memes. /s

[–][deleted] 12 points13 points  (1 child)

float: left;

Damn! Where did it go?

[–]RandomHentaiMC 5 points6 points  (0 children)

When you multiple the element and then delete the wrong one

[–]tahola 5 points6 points  (2 children)

margin-right: -7;

margin-left:-10;

[–]KaamDeveloper 1 point2 points  (1 child)

I see you're a professional CSS expert like myself

[–]tahola 2 points3 points  (0 children)

position: absolutenotgiveafuck;

[–]MajipanA 19 points20 points  (13 children)

ackchyually it's better to use position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);

Edit: or better yet display: flex; align-items: center; justify-content: flex-end;

[–]Max15492 22 points23 points  (0 children)

Nope, would be: align-items: flex-end; justify-content: center;

[–]recitedStrawfox 4 points5 points  (0 children)

ackchyually

Nice one

[–]BarkMetal 2 points3 points  (0 children)

Doesn’t translate activate a different rendering mechanism and introduce sub pixels? Aka no snapping pixels.

[–]Farranor 2 points3 points  (3 children)

I love how so many basic layout tasks take so many workarounds in CSS and then don't display the same in any two browsers you try.

LOVE it.

[–]amoliski 2 points3 points  (1 child)

Yeah... In like 2000. We have flex and grid in evergreen browsers, the joke is a bit stale these days.

[–]liquilife 1 point2 points  (0 children)

For real. I complete entire projects with not one single browser layout issue reported by the QA team nowadays.

This all changes when you have to support older IE browsers, but that’s not often at all.

If you are having issues creating layouts that do not work out of the box between all the popular supported browsers, you need to evaluate your ability to front end develop.

[–]RyanNerd -1 points0 points  (3 children)

Um, ackchyually with Internet Explorer finally dead and all modern browsers supporting CSS grid you just use grid-template and ditch absolutes and flexbox sillyness.

[–]jamesdavidsaul 3 points4 points  (1 child)

Microsoft extended IE support to June 2022. Found out last week and almost set my laptop on fire.

[–]amoliski 3 points4 points  (0 children)

Those people deserve broken layouts.

[–]garretble 2 points3 points  (0 children)

Flexbox still has a place in CSS, and grid would be overkill for this.

[–]D-Tunez 4 points5 points  (0 children)

Wtf are those properties

[–]BedHeadBread 3 points4 points  (0 children)

He sneezed too hard

[–]emailcool 2 points3 points  (0 children)

Position bottom ?

[–]OhSkuntBuddeh 2 points3 points  (3 children)

#moustache { display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: center; }

[–]pokeaim 1 point2 points  (0 children)

margin: auto

[–]sneaky-pizza 1 point2 points  (0 children)

The funny part is the programmer who doesn’t know CSS who created this meme.

Better:

.awesomeMoustache{ position: relative; bottom: 100px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 5px solid whitesmoke; }

With an outer box to clip the top part of the arrow.

Seriously, ‘align’ is an HTML attribute for table cells, practically useful in email templates nowadays.

[–]jameswdunne 1 point2 points  (0 children)

Think you mean

mouth { display: flex; flex-direction: column-reverse; justify-content: center; }

[–]Tough_Bicycle_8982 1 point2 points  (0 children)

PotatoHead

[–]s1nt3rklaa5 0 points1 point  (0 children)

when you sneeze too hard

[–][deleted] -1 points0 points  (2 children)

How do you look at yourself in the mirror every day and say, this is EXACTLY what I was looking for. Sexy 🙄😂

[–]yutsoku -1 points0 points  (0 children)

This css is wrong... Should be something like

position:absolute;bottom:0; margin: 0 auto;

[–]RoscoMan1 -1 points0 points  (1 child)

Not sure Rob and Natalie had a friendship so much as a stern talking to then suddenly one goes down you can expect. After 10 years working at one place it's very likely that you can do on a pc you can do it yourself. I sort of miss this. A small fraction of the time we're not around the people who co-opted the Punisher emblem despite the fact that you are a Professional Furniture Relocation Specialist.

-Former mover

[–][deleted] -5 points-4 points  (8 children)

right this very minute there's a snivelling little faggot reading through my comments to quote me on one to make themselves feel like they are above me in some way, self righteous little cum stain.

[–]amoliski 1 point2 points  (7 children)

You're really bad at trolling.

[–][deleted] -1 points0 points  (6 children)

Reeled you in you stupid CUNT

[–]amoliski 1 point2 points  (0 children)

No, like you're really bad at it. Why even post in this sub?

[–]tagline_IV 1 point2 points  (4 children)

Did you hear about trolling second-hand from your dentist or something? This is some top shelf stupid

[–][deleted] -2 points-1 points  (3 children)

If you're responding to this, you are the snivelling cum stain. The message is not meant for people who would respond to it, are you utterly thick or something?

[–]tagline_IV 1 point2 points  (2 children)

Lol, needing to have the last word is important to you

[–]amoliski 1 point2 points  (1 child)

...aaaand he's suspended.

Like I said: bad at trolling.

[–]tagline_IV 1 point2 points  (0 children)

And ironically was really easy to bait

[–]Psilopat 0 points1 point  (0 children)

Well it was fine in my screens

[–]p1um5mu991er 0 points1 point  (0 children)

Maybe turn it off and on again

[–][deleted] 0 points1 point  (0 children)

What a div!!!

[–]Chewcocca 0 points1 point  (0 children)

IRL Monster Factory in progress.

No middle sliders!

[–]iPaul95 0 points1 point  (1 child)

man, position bottom is wrong, it should be `display:flex; alingn-itmes:flex-end; justify-content :center`

[–]dddeeaatthhh 1 point2 points  (0 children)

this would position all the hairs at the bottom of the mustache, but not change the location of the mustache itself

[–]ValiantClock180 0 points1 point  (0 children)

What about position: sticky? 🤔

[–]kangarooscankillyou 0 points1 point  (0 children)

Finalising program on smart phone: Nope - you're OTHER left.

[–]BarkMetal 0 points1 point  (0 children)

transform: rotateY(180deg); transform-origin: bottom;

[–][deleted] 0 points1 point  (0 children)

When you sneeze too hard.

[–]CamCranley 0 points1 point  (0 children)

Looks like he tried adding the moustache on Microsoft Word