CSS는 기본적으로 나중에 정의한 것이 먼저 정의한 것을 덮어 씁니다.

즉, 아래와 같이 되어있는 경우 

.box-color {
  background-color: red;
}

.box-color {
  background-color: blue;
}

.box-color가 적용된 영역은 파란색이 됩니다.

하지만 나중에 정의한 것과 상관없이 우선 순위를 주기 위해 아래와 같이 !important를 사용합니다.

.box-color {
  background-color: red !important;
}

.box-color {
  background-color: blue;
}

그러면 해당 영역은 빨간색이 됩니다.

이 때, 다시 나중에 정의한 것에 우선 순위를 주고 싶으면 거기에도 아래와 같이 !important를 주면 됩니다.

.box-color {
  background-color: red !important;
}

.box-color {
  background-color: blue !important;
}

그러면 해당 영역은 다시 파란색이 됩니다.

즉, important는 속성을 좀 더 강제하기 위해 사용되는 것이지만 이것이 웹표준을 벗어난다고 할 수는 없습니다.

CSS를 이용하여 코딩을 하다보면 때로는 강제하는 것이 더 효율적인 경우가 있기 때문입니다.

실제로도 서비스에서나 오픈소스 등을 살펴보시면 important가 많이 사용되고 있습니다.

따라서 적절하게 사용하면 코딩을 좀 더 수월하게 할 수 있는 좋은 속성입니다.

그러므로 웹표준이라든가 구조를 너무 고민하지 마시고 필요하다면 언제든지 넣었다가 뺐다가 하면서 쓰시면 됩니다.