Scribd
Cargar
59 vistas

Tutorial Shamecss El Css de La Verguenza

Este artículo propone una solución para gestionar los errores y problemas temporales de CSS mediante la creación de un archivo llamado 'shame.css'. Este archivo agrupa todas las 'chapuzas' o parches temporales realizados con !important y una explicación del error que corrige. Esto permite solucionar problemas de CSS de forma ordenada y facilita estimar el tiempo necesario para corregirlos.

Cargado por

gerar
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
59 vistas

Tutorial Shamecss El Css de La Verguenza

Este artículo propone una solución para gestionar los errores y problemas temporales de CSS mediante la creación de un archivo llamado 'shame.css'. Este archivo agrupa todas las 'chapuzas' o parches temporales realizados con !important y una explicación del error que corrige. Esto permite solucionar problemas de CSS de forma ordenada y facilita estimar el tiempo necesario para corregirlos.

Cargado por

gerar
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Inicio Libros Tutoriales Eventos Foro Buscar

shame.css, el CSS de la
vergenza
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 da a da, la solucin ms sencilla suele ser aadir el modificador
!important para que se apliquen los estilos correctos y esperar a tener tiempo algn
da para solucionar bien el problema.

Si tus hojas de estilos tienen muchos !important y tambin tienen estilos como
overflow: hidden o incluso display: none , es seal de que no ests haciendo del
todo bien tu trabajo. Como no es realista pensar que siempre tendremos tiempo de
hacer bien nuestro trabajo, la mejor solucin consiste en gestionar bien estas chapuzas,
en vez de disimularlas.

La propuesta del diseador Harry Roberts pretende solucionar estos problemas de una
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
manera sencilla y sorprendente. En vez de disimular todas estas chapuzas, Harry
propone agruparlas en un nico archivo CSS llamado shame.css (shame significa
vergenza en ingls).

Siempre que tengas que hacer una pequea chapuza para arreglar rpidamente algn
estilo de tu sitio, aade esas nuevas reglas al final del archivo shame.css e incluye
tambin una explicacin 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 ratn por encima, los enlaces
* desaparecen. As que como solucin provisional se aade el
* !important al estado :hover de los enlaces del men lateral.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
*/
#lateral ul.menu a:hover {
color: #FFF !important;
}

Las ventajas de este mtodo 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 ms fcil


solucionarlas sin dejar rastros por varios archivos CSS del sitio.

Ayuda a crear un historial de todos los errores del diseo.

De un solo vistazo permite estimar el tiempo que costara solucionar los errores del
diseo del sitio.

Para no herir el orgullo de tu equipo de diseo y para no desvelar pblicamente esta


informacin, lo ideal es que el servidor de produccin agrupe automticamente este
archivo shame.css con el resto de archivos CSS del sitio y que elimine tambin
automticamente sus comentarios.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Comentarios
0 Comentarios LibrosWeb
1 Acceder

Ordenar por los mejores


Recomendar Compartir

S el primero en comentar...

S el primero en comentar.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
1 comentario hace un ao Cristyan Valera Muy buena la herramienta!
Ramon Saki Gracias tengo un scrip para hacer
copia de seguridad de mi base de datos a Amazon S3 y
no me haba dando cuenta que cada vez

Suscrbete d Aade Disqus a tu sitio web Privacidad

Fecha de publicacin
27 de septiembre de 2013

ETIQUETAS POPULARES
composer css diseo html javascript php programacin sistemas symfony

SUSCRBETE GRATIS

RSS Todos los tutoriales


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
RSS Tutoriales de diseo

RSS Tutoriales de programacin

3.756
2006-2017 LibrosWeb.es Contacto Novedades Condiciones Privacidad

das online

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com

También podría gustarte