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, I believe 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.

[–] bleistift2@sopuli.xyz 2 points 1 month ago* (last edited 1 month ago) (1 children)

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.

[–] dohpaz42@lemmy.world 3 points 1 month ago

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).