enhance utility classes

[adi-unni]

Enhance the utility classes by adding !important to them all and removing the mentioned classes from the ticket #3138

[rmccar]

Research into whether adding !important to all the utility classes is best practice in this case

[precious-onyenaucheya-ons]

Using !important can help override specificity and ensure certain styles are applied consistently. It is particularly useful for utility-first CSS frameworks where specific styles need to take precedence. However, overusing !important can lead to styling conflicts.

Judging from the above statement and the use case of the Design System, my thoughts would be:

For utility classes that perform a single task (e.g., setting a color, margin, or padding), using the !important tag can be beneficial to ensure these styles take precedence and are applied as intended.

However, for utility classes that combine multiple styles, avoid using !important (e.g., grid).

Best Practices

• Use !important sparingly: Only for single-purpose utility classes.
• Avoid !important in multi-style classes: Keep CSS predictable and maintainable.