La insoportable complejidad de las acciones CSS

Hoy no traigo ningún truco que deba de recordarme para mi yo futuro. Hoy quiero compartir con mis lectores (si queda alguno) la cruda realidad de la facilidad con que nos podemos encontrar con un efecto mariposa al utilizar CSS.

Estoy modificando www.findercar.es para hacerle un cambio rádical a la página inicial, en la búsqueda constante de optimizar la experiencia de usuario. Y le quiero poner una caja de texto para realizar búsquedas.

Y hete aquí que, aunque es una aplicación muy simple hecha en HTML5 + CSS3 + bootstrap + jquery, me encuentro que la caja de texto no se expande a todo el ancho del contenedor.

Después de darle mil vueltas y probar de todo, al final se me ocurrió revisar las css que están dentro de la carpeta “Content“; y me encontré lo siguiente en el fichero Site.css:

/* Set width on the form input elements since they’re 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}

Sin duda la solución es comentar o borrar este selector que impide que este tipo de control crezca más allá de los 280 pixeles.

Pero, cuidado, esto puede llevar a que el diseño reviente en los sitios más insospechados e imprevistos.

Conclusión: con las css siempre aplicar el principio KISS a rajatabla. Porque cada clase lleva inherente la posibilidad del desastre. 

Anuncios

Un comentario en “La insoportable complejidad de las acciones CSS

  1. kiquenet dijo:

    El diseño es un dolor de cabeza, para los no diseñadores más 🙂

    Con Bootstrap e infinidad de plantillas, no sé si es peor o mejor.

    Imagino que los diseñadores experimentados tendrán su lista de trucos y sus checklists,herramientas y validadores que facilitarán mucho el trabajo.

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s