Why do I need !important [duplicate] - css

Question

This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 1 year ago.
I have classes in css
.box {
background-color: white;
border: solid 5px white;
border-radius: 5px;
width: 90px;
height: 90px;
margin-top: 30px;
box-shadow: 0 8px 6px -6px #313131;
object-fit: fill;
position: relative;
cursor: pointer;
}
.active {
background-color: white;
border: solid 5px white;
border-radius: 5px;
width: 100px!important;
height: 100px!important;
margin-top: 20px;
box-shadow: 0 14px 6px -6px #313131;
position: relative;
animation: fadeactive 6s infinite;
}
.box:hover {
background-color: white;
border: solid 5px white;
border-radius: 5px;
width: 100px;
height: 100px;
margin-top: 20px;
box-shadow: 0 14px 6px -6px #313131;
object-fit: fill;
position: relative;
}
.box:hover.active .title {
display: none!important;
}
.title {
display: none;
position: relative;
font-size: 70%;
background: black;
color: white;
border-radius: 5px;
padding: 5px;
top: -40px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
z-index: 2;
width: fit-content;
}
I use .box on some items, and sometimes I use .active as well (using both classes). If I do not use !important, the box size stays 90px instead of 100px. Also in .box:hover.active .title I need to use !important to make it work. What did I do wrong? How can I get rid of !important here?

Answer 1

Here in this example,
Without the !important, the color will be red since ID has most priority.
But since I gave !important to the span, it is taking that style.
#item1 {
color: red;
}
.item {
color: yellow;
}
span {
color: blue !important;
}
<span class='item' id='item1'>hi</span>