This is actually a rant.
But just like CSS - let's not take everything we write so seriously!

!important

Let’s hope this doesn’t hear @uyouthe

I have a feeling that there is an easy and proper way to write css.

A lot of front end developer can't just be tweaking thing randomly until it work, right?

@mr-user There are legends...

@DOSnotCompute

There can't be smoke without fire , they can't be legend without truth.

"Gather around kids, grandpa going to tell you a story. In olden time they are heroes. Some of them can lift a mountain , some of them are as fast as wind , some of them can do CSS!!"

Dm me if you have any css-related questions

@uyouthe

Is there any easier way to make it look nice on various screen size other than the percentage?

@mr-user vh vw calc clamp

@uyouthe Thanks

CSS used to be a nightmare, but now it's actually kinda a proper programming language. It has libraries, built-in functions, variables, and you can kinda do math in it

I mean really. I’m bored. All of you PLEASE I’m ready to answer all your questions related to CSS. Dm me. Seriously.

CSS is my favorite language. I met the creator of it and we had a nice chat. I do CSS on daily basis.

@uyouthe grid or flexbox for page layout?

@uyouthe

I don't think dev rant support DM. I will mention you a lot because I suck at CSS.

Most of my problem consist of "when tweaking a single thing , the whole chaos occur scenario"

@mr-user https://t.me/uyouthe

@10Dev if you want responsiveness and the layout is simple, go with flex. Can make it responsive without media queries. If the layout is complex, you have to use media queries and then go with grid

@uyouthe Ok hotshot, go! "Responsive centered div in 16:9 properties". ...that'd actually save me on Monday.

I'm a C# / Python guy, promised myself 15 years ago I won't ever touch CSS / web again. :P

@DOSnotCompute easy. You have the parent div and the child. Make parent 100vh height, flex with align-items center and justiy-content: center. now your child is centered. Now set its width to whatever % you'd like and use this technique (https://css-tricks.com/aspect-ratio...) to achieve aspect-ratio

@uyouthe Absolutely fantastic! Thank you, that was very unexpected and you probably saved me a ton of work on Monday. :)

@uyouthe why do we ever needed to use the clearfix hack to begin with?

@AleCx04 imagine two divs one on top of another and you have to position them side-by-side. Float actually alters the document flow. It kinda works like absolute positioning. So when both of them are floated, they're both out of the document flow so no height so they're kinda like on top of everything just like with absolute positioning and the content below that still obeys the flow can't see floated elements and positions itself below them as if it's nothing there.

@uyouthe
I really like CSS, so not ranting at all.
But what is the most idiomatic way of emulating class inheritance in CSS?
I would like to be able to define sets of properties and include them in completely unrelated classes for completely unrelated elements of the same page.

Most common use case would be defining text properties, borders, margins/paddings, backgrounds once and then using them on multiple completely unrelated elements by referencing them in the CSS instead of having to add multiple class names to the HTML elements.

@uyouthe I suck at CSS. I can do basic stuff but then I see all the wacky awesome Codepen masterpieces and I feel like a kindergartner. What’s the best tutorial or way to not suck anymore?

I like css very much. I like it much more then any GUI builder I've seen in the past. One reason is that you can do nearly everything with css. And it is not as hard as many people think. It just needs a little bit of practice.

@uyouthe Note: this pattern will fail if the content is taller than the view height unless you add overflow:scroll or overflow:auto;

Or you can change it to height:auto; for mobile landscape sizes... or adjust the content to smaller fonts so it won't overflow... or something.

@Oktokolo helper classes. If you can do scss and other such thing — it’s mixins.

@stackodev switch your engineering mindset from imperative to declarative. Unfortunately this is the only real option.

@HiFiWiFiSciFi the perfect solution would’ve been min-height, but sorry. CSS is bad at anything aspect ratio for a reason — content is the king. CSS intentionally lacks a rich toolkit of setting sizes “from above”. In web philosophy, sizes should be set “from below”, e.g. by content itself.

@uyouthe
Helper classes work, but they do clutter the HTML significantly.
Mixins are one of the still missing but absurdly helpful features (right after styling of elements depending on what elements they contain and aligning element edges relative to edges of completely unrelated elements identified by a css selector).

@Oktokolo mixins almost never worked for me. They turn the entire codebase into trash sooner or later, the same fundamental problem as the one with multiple inheritance.

I always ban mixins when the decision is mine.