Should CSS utility classes have the "!important" keyword?

Let’s say I have a few utility classes:

.primary-text {
    color: blue;
}
.danger-text {
    color: red;
}
.display-400 {
    width: 400px;
}
.max-width-100 {
    max-width: 100%;
}

Do classes like this require the !important keyword?

Solution 1:

If you have some other CSS files that are loaded before this file, you have three ways to force your CSS content to load:

1. add !important

2. add your CSS file link tag at the end of another link tag

3. find a more accurate selector for your tag like this:

   span.primary-text {
       color: blue;
   }
   
   

This code has higher priority.

But if you don't use any other CSS file that contains these selectors with the same properties, you don’t need to use !important.