[role="button"] and not button, .btn, .my-cool-custom-btn-xxxl. When you add role="button" element already gets cursor: pointer, did you know that?<comment> which gets border radius, box shadow, etc.<grid> or <flex type="column"> and in CSS flex { display: flex } flex[type="column"] { flex-direction: column } etc.app- prefix to avoid conflicts with any 3rd party code, admin- for admin panels, after that module/section name comes out, like app-footer, admin-footer and all elements within that modules/sections with both app and module prefix name, for example app-footer-imgu- prefix and icons with i- or ico- prefixsvg.class to tell myself in future and everyone that this class is for SVG elements and should use fill and not color for example.So use semantics as much as possible.