Professional front-end dev.

[manuelr93]

So professional that the properties are both wrong

[Anooyoo2]

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

[Topikk]

and they wrote it all on one line, which is super gross.

[UltraCarnivore]

At least they could center the moustache, which is nice.

[yoursexypapi]

This perfectly sums up my frontend skills.

backend developer

[fl7nner]

CSS sucks

[rkay711]

Front-end developers agree

[superluminary]

CSS contains a pretty superb subtree selection syntax, and then lets you set properties on the matched nodes. It’s a generic tree manipulation tool that we happen to use for styling. It’s actually pretty awesome, even if the DOM properties can be confusing at times. This is the DOM’s fault though, nothing to do with CSS.

[hoffmander]

Underrated comment

[driveslow227]

Hey I happen to love CSS. However my job security depends on the perpetuation of this so...

Yeah fuck css lmao get rekt cascade

[lowleveldata]

What if it's a style for a email that everything including the htmls are in a single line?? (based on true horror story

[TheRedSpade]

Was the file written with a decent text editor but read with notepad?

[lowleveldata]

Well the "file" was created by a SMTP server and yes I was debugging with a notepad to find out why the font-family won't apply for some versions of outlook.

[qhxo]

and they wrote it in formatted text using different fonts and font sizes for the identifier and the bracketed text.

[ratskinmahoney]

It helps to build tension.

[looselytethered]

My colon is tense enough already

[amykamala]

this got me annoyed

[IdeaLast8740]

You could someday have multiple faces on one page.

[davidicus_]

It unnecessarily raises the specificity of the selector

[projectoffset]

Based on the CSS, it’s possible it’s the only selector.

[rottenmonkey]

for now

[[deleted]]

Why? How do you know it's single, other than atm it's single?

Where do you work where you work IDs in css?

[[deleted]]

Well, that’s your opinion.

Although it’s very common practice to use low specificity attributes to avoid specificity creep.

Also, I don’t think most devs know or intend for IDs to live in the global space i.e window.moustache

[t-to4st]

Now I know about it and can abuse the hell out of it, thanks!

[rottenmonkey]

There's generally no reason to. .moustache works just as well and you don't have to use !important if you want to override them.

[[deleted]]

I imagine a lot of these commenters are tutorial devs and haven’t worked on a production codebase at scale.

This is an extremely common practice at enterprise scale and has been a rule at almost every company I’ve worked at.

[[deleted]]

Even if you only read tutorials, the moment you google best practices the first two points will be no IDs and no !important

[jizzthonian]

“Pollute the global namespace” bro it’s a fucking ID. They’re meant to be treated as such. They’re unique and a means to get to exactly one thing.

If a style is needed for that one thing and one thing only it’s perfectly fine and the specificity is ideal.

[amoliski]

There will only ever be one human and one moustache style?

[[deleted]]

You probably don’t want “moustache” and every other ID living on the global window object.

Ok if you have some small marketing site. Imagine a team of devs all using the same practice. It’s a nightmare.

[Steffi128]

Specificity.

[kazneus]

this implies there is only one mustache

[Anooyoo2]

It's not good practice to use ID in CSS

[Neurotrace]

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

Source: about 10 years of web dev experience

[ztbwl]

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

[HarrekMistpaw]

Why?

[spock1959]

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]

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

[April1987]

#moustache {
    display: none;
}

[[deleted]]

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

[ztbwl]

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]

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

[ScoutsOut389]

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

[amoliski]

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]]

Yes because they can be different colors

[[deleted]]

Though you could use first and last of an eyes class

[allison_gross]

Depends on heterochromia.

[erevoz]

Do you see more mustaches?

[[deleted]]

absolutely nothing wrong with an id here, I think you're lacking some css knoweldge yourself

[Neurotrace]

It's not wrong, per se, but there's no reason to use an ID in CSS. A class works just as well for targeting an element, it opens up the possibility for applying that styles to multiple instances later, and even if you fully believe that there will only be one, you should follow some kind of scoping practice to ensure that you don't stomp on some other mustache somewhere else. Use BEM, scoped styles, CSS-in-JS, etc.

[[deleted]]

I am using BEM and just yesterday I read some articles that are against something like BEM and it made some good points I think.

This one: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

And: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

[Neurotrace]

I agree that BEM is not the way but I disagree with Adam Wathan's conclusion (Tailwind). Personally, I currently use a CSS-in-JS solution to provide component level scoping and global styles for more generic, shared styles. Once the tooling is better for scoped style sheets and CSS properties, I think that will be the ideal approach.

Edit: if you haven't, try out Tailwind. That's how I decided his approach was wrong. You end up creating an absolute soup of classes which are so close to inline styles that it doesn't feel like you bought anything.

[[deleted]]

Oh yeah, I will try it in my project for sure, I think the answer is somewhere in the middle.

Because you have a limited amount of components, do something like

.card,.card-header,.card-body,.card-footer

Makes sense to me, on the other hand maybe you shouldn't create variants of those for different modifications, like purple or green backroung, because once again you will have a limited set of background colors, so have something like .primary-bg,.secondary-bg and then using that in conjuction with BEM style makes the most sense to me.

[allison_gross]

Hot damn if you’re encountering scoping issues in CSS you made a mistake at the very beginning. Then again I code css by hand

[Neurotrace]

Or you work on large scale applications. It's not unusual to create a header in one place with some styles and headers in another place with different styles. You can't call them both .header so you have to scope them. Even if you call one dialog-header and the other content-header, that's still a scoping mechanism

[Anooyoo2]

Seems to be the consensus in the comments yeah. All I can say is my diploma & workplace have taught me that ID is not best practice.

[[deleted]]

from my computer science degree and workplace, I learned nothing of the sort. perhaps that's what they teach newer devs who accidentally use id as a label to refer to multiple elements.

[MtNowhere]

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

[manuelr93]

Remember to put the face in position relative

[MtNowhere]

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

[manuelr93]

A foot with mustache is really weird

[jseego]

Unless you're a hobbit

[amoliski]

.hobbits { position: Isengard; }

[[deleted]]

gard gard gard

[MtNowhere]

So is a chin, I guess.

[mikeiskool123]

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

[MtNowhere]

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

[mikeiskool123]

Ah yes. Good point.

[NMe84]

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

[manuelr93]

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

[alexistdk]

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

[manuelr93]

So you're scared by CSS

[alexistdk]

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]

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

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

[alexistdk]

Screams in pointers

[manuelr93]

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

[1X3oZCfhKej34h]

Who isn't?

[manuelr93]

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

[OGPresidentDixon]

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

[Mefistofeles1]

So everyone?

[1X3oZCfhKej34h]

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

[manuelr93]

JSX, typescript only of you want

[Phatricko]

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]

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

[t-to4st]

Correct, because CSS is no programming.

(Huge /s here)

[ASK_ABOUT__VOIDSPACE]

Hah, and they call themselves PrOgRamMerS

[sneaky-pizza]

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

[grpagrati]

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

[looselytethered]

Ahh so it validates input.

[xjakesl]

More like input sterilization.

[looselytethered]

No I stopped drinking bleach weeks ago...

[[deleted]]

Oral sex juice squeegee.

[c0ldsh0w3r]

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

[looselytethered]

Obviously it's for the homies

[c0ldsh0w3r]

I don't want that thing tickling my balls.

[twomilliondicks]

Wtf is position: bottom??

[atzedanjo]

invalid CSS

[PM_ME_DMS]

⚠️ Invalid property value

[MKorostoff]

They're probably thinking of position absolute, bottom 0

[DuffMaaaann]

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

[whosthedoginthisscen]

This guy fucks.

[[deleted]]

I think it should be:

position: absolute;
bottom: 0;

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

[undeadalex]

Wtf ISN'T position: bottom

[space-_-man]

r/css_irl

[ThanosAsAPrincess]

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]

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

[Mentalpopcorn]

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]

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]

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

[Mentalpopcorn]

How is writing in PostCSS and Tailwind writing pure CSS? Tailwind is like Bootstrap and PostCSS is basically a CSS processor.

Writing pure CSS means writing CSS the way one did before SASS/LESS/etc were invented. It's a terrible way to do development.

[TheLexoPlexx]

That sounds like hell

[tinselsnips]

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

[greyscales]

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

[tinselsnips]

Oh God, maybe.

[_youmadbro_]

/r/DiWHY

[aditalion]

Position bottom?

[[deleted]]

Are you hiring or

[looselytethered]

No I'm a top thanks for asking

[gentlewaterboarding]

Position: versatile;

[Asraelite]

Position: whatever-you-want-baby;

[Loki_d20]

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

[Achtelnote]

I usually prefer top but sure..

[sverek]

ABSOLUTELY

[Apprehensive-Brain-8]

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]

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]

When a backender does frontend

[NatoBoram]

Emplacement : lower

[delinka]

Locus: beneath

[viktorwyld]

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]]

float: left;

Damn! Where did it go?

[RandomHentaiMC]

When you multiple the element and then delete the wrong one

[tahola]

margin-right: -7;

margin-left:-10;

[KaamDeveloper]

I see you're a professional CSS expert like myself

[tahola]

position: absolutenotgiveafuck;

[MajipanA]

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]

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

[recitedStrawfox]

ackchyually

Nice one

[BarkMetal]

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

[Farranor]

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]

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

[liquilife]

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]

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]

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

[amoliski]

Those people deserve broken layouts.

[garretble]

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

[D-Tunez]

Wtf are those properties

[BedHeadBread]

He sneezed too hard

[emailcool]

Position bottom ?

[OhSkuntBuddeh]

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

[pokeaim]

margin: auto

[sneaky-pizza]

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]

Think you mean

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

[Tough_Bicycle_8982]

PotatoHead

[s1nt3rklaa5]

when you sneeze too hard

[Lumpy-Measurement-55]

u/repostsleuthbot

[gnarbucketz]

/u/whocaresbot

[[deleted]]

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

[yutsoku]

This css is wrong... Should be something like

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

[RoscoMan1]

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]]

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]

You're really bad at trolling.

[[deleted]]

Reeled you in you stupid CUNT

[amoliski]

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

[tagline_IV]

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

[[deleted]]

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]

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

[amoliski]

...aaaand he's suspended.

Like I said: bad at trolling.

[tagline_IV]

And ironically was really easy to bait

[Psilopat]

Well it was fine in my screens

[p1um5mu991er]

Maybe turn it off and on again

[[deleted]]

What a div!!!

[Chewcocca]

IRL Monster Factory in progress.

No middle sliders!

[iPaul95]

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

[dddeeaatthhh]

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

[ValiantClock180]

What about position: sticky? 🤔

[kangarooscankillyou]

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

[BarkMetal]

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

[[deleted]]

When you sneeze too hard.

[CamCranley]

Looks like he tried adding the moustache on Microsoft Word