Para estilizar, mejor usar las clases, ya que los ID's solo se puede
utilizar uno por página y tienen otros usos más convenientes que para
estilizar.
Por ejemplo, si una section tiene el
id="section1", al clickar en una etiqueta a con
href="#section1", nos llevará a esa sección.
Sirve para "anular" la especificidad y provocar que la propiedad a la
que se le aplica el !important prevalezca.
Si a un elemento se le aplican dos clases (.main y .example) y ambas comparten alguna propiedad, se establecerá la que esté más abajo en el fichero CSS (por ello es Cascading Style Sheet).
.main { height: 200px; border: 1px solid black; }
.example { height: 500px; border: 1px solid orange; }
Sin embargo, si se le añade !important a la propiedad de la
clase que esté más arriba, ésta prevalecerá sobre la que esté más abajo.
.main { height: 200px; border: 1px solid black !important; }
.example { height: 500px; border: 1px solid orange; }
En este caso, el height será el de la clase .example, pero el border
será el de la clase .main por haberle añadido !important
No es recomendable usar !important, solo cuando sea estrictamente necesario.