Cuando mantienes las hojas de estilo CSS de un sitio web grande o complejo, resulta habitual encontrarse con problemas relacionados con la especificidad de los selectores. Con las prisas del día a día, la solución más sencilla suele ser añadir el modificador !important para que se apliquen los estilos correctos y esperar a tener tiempo algún día para solucionar bien el problema.
Si tus hojas de estilos tienen muchos !important y también tienen estilos como overflow: hidden o incluso display: none, es señal de que no estás haciendo del todo bien tu trabajo. Como no es realista pensar que siempre tendremos tiempo de hacer bien nuestro trabajo, la mejor solución consiste en gestionar bien estas chapuzas, en vez de disimularlas.
La propuesta del diseñador Harry Roberts pretende solucionar estos problemas de una manera sencilla y sorprendente. En vez de disimular todas estas chapuzas, Harry propone agruparlas en un único archivo CSS llamado shame.css (shame significa vergüenza en inglés).
Siempre que tengas que hacer una pequeña chapuza para arreglar rápidamente algún estilo de tu sitio, añade esas nuevas reglas al final del archivo shame.css e incluye también una explicación de por qué es necesario ese estilo y qué error está corrigiendo. Ejemplo:
/**
* Error en el estado :hover de los enlaces del menú lateral.
*
* Alguien ha utilizado el modificador !important en el estilo
* del estado :hover de los enlaces del lateral:
*
* #lateral a:hover { color: #CC1414 !important; }
*
* El problema es que el menú del lateral tiene un color de fondo
* parecido, por lo que al pasar el ratón por encima, los enlaces
* desaparecen. Así que como solución provisional se añade el
* !important al estado :hover de los enlaces del menú lateral.
*/
#lateral ul.menu a:hover {
color: #FFF !important;
}Las ventajas de este método son evidentes:
- Las chapuzas no ensucian los archivos CSS principales del sitio web.
- Al estar todas las chapuzas agrupadas en un mismo archivo, es mucho más fácil solucionarlas sin dejar rastros por varios archivos CSS del sitio.
- Ayuda a crear un historial de todos los errores del diseño.
- De un solo vistazo permite estimar el tiempo que costaría solucionar los errores del diseño del sitio.
Para no herir el orgullo de tu equipo de diseño y para no desvelar públicamente esta información, lo ideal es que el servidor de producción agrupe automáticamente este archivo shame.css con el resto de archivos CSS del sitio y que elimine también automáticamente sus comentarios.