Me waiting for the AI to close the tag for me

submitted by

https://feddit.org/pictrs/image/3d486617-4248-489e-a517-89168ecb4173.jpeg

Me waiting for the AI to close the tag for me
35
331

Log in to comment

Hot Top New Old

You don’t need to close it, your HTML will be rendered correctly anyway.

 reply
67

+1 you monster

 reply
50

I always wondered why HTML even has standards, when you barely have to understand how it works to build a web page that functions as intended…

 reply
7

Do people not even Emmet anymore?? Tsk…

 reply
7

I do but I always forget I have it installed. 😅

 reply
2

A few datacenter-adjacent-community’s cubic meters of water later…

 reply
7

The water I would’ve needed to chug from the effort to close it myself. 😌 /s

 reply
5

Why do you have a class that says “button”?

 reply
9

for styling, probably

 reply
21
edited

There’s nothing stopping you from styling buttons.

 reply
1

Yes, but element selectors based on the tag name alone are considered bad practise. Especially in bigger HTML sites. Even more so if you use a JS library / framework or some broad browser stylesheet underneath, or you use the same stylesheet in several places.

Also, a div or img tag can be a button with its own event listener as well. That may be asking for trouble as well, but I’ve been there (not proud of it).

 reply
21

A use case I find perfectly valid are <label class="btn">s for checkboxes and radios with huge-ass hit areas.

 reply
6

are considered bad practise.

Considered by whom?

The reasons that made a bunch of people scream very loudly to not do that 20 years ago were never good enough for making generic advice and don’t exist anymore.

Even more so if you use a JS library / framework or some broad browser stylesheet underneath

Learn CSS layers, use CSS layers.

Overall, if you every feel the need to write in your code “a button (behaves like a button)”, it’s very likely you are doing something wrong.

 reply
4
edited

I’m not sold on layers, they do nothing to simplify the current mess that CSS is, because they build on top of what’s already out there. IMO it just adds complexity.

The specificity rule is not that hard to understand, I’m not sure what’s the point of throwing layers in the mix.

 reply
2

Learn CSS layers, use CSS layers.

What are CSS layers? I’m legitimately curious.

 reply
1

They change the precedence rules so that you can import large frameworks at will and not have them disrupt your rules or each other.

Basically, anything you apply in one layer has less precedence than what is applied on the next layers.

 reply
3
Continue thread

Not every button should have the usual button-y style. A close button, for instance, might be displayed differently. Or a play button layered on top of a video.

 reply
6
edited

I imagine the better argument (in my opinion) would be to not use generic names such as btn, as they are redundant and offer little self-documentation of their use.

Instead a combination of selectors and classes would be more meaningful, and encourage readability. For this particular scenario, I would go with a button selector to give all <button> tags a consistent basic styling, and use aptly-named classes like .cancel, .primary, and .destructive to add more styling for specific button purposes.

Then if I need to find all Cancel buttons, I can use a button.cancel query selector and only get Cancel buttons.

 reply
4

This only works if the cancel button looks like a specialized button. If it doesn’t (for instance, if it looks like the usual “×” symbol), you’re in for a lot of style overrides.

Oh, and guess what: Your suggestion is exactly what bootstrap does. .btn.primary is for the default action, .btn.secondary I usually use for aborting and going back, .btn.danger shows that bad things will happen. The only difference is that if doesn’t force its default styles on all plain <button> elements that might be present on the page.

 reply
2

You’re absolutely right. My idea is to imply that developers should give their semantics actual thought and intention.

For your example, the X button can be called .dismiss, since typically that’s what clicking the X does; whereas cancelling something may have more meaning (e.g. cancelling a subscription, which triggers other actions aside of dismissing a modal window).

 reply
3
edited

Besides what the other comment mentioned, that’s also not how most front-end frameworks work. You often need specific classes with your elements to use the default styles.

 reply
2

Because it’s a meme. Not prod code

 reply
3

From the other replies, it looks like the most used CSS framework expect people to code like that.

Not that it’s good, but lots of people insist you can’t coordinate teamwork in CSS without using it.

 reply
1

I suppose they prefer buttons to snaps, zippers, Velcro, or toggle loops

 reply
1
Insert image