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.
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).
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.primaryis for the default action,.btn.secondaryI usually use for aborting and going back,.btn.dangershows 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.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).