Un sitio web suele estar desarrollado con multitud de lenguajes de programación web como pueden ser HTML, CSS, Javascript, ASP o PHP, entre otros. De entre todos estos lenguajes estaremos de acuerdo en que CSS es el lenguaje más sencillo. CSS define los layouts del sitio web, los colores, los tamaños y la tipografía utilizada de manera simple. Como hemos dicho antes, es muy sencillo y no requiere de un pensamiento lógico o condicional para llegar a utilizarlo.
Sin embargo, es posible que te sorprenda saber que, de hecho, CSS puede ser el lenguaje más difícil y molesto en algunos casos. ¿Cómo va a ser esto posible? Te preguntarás... Bueno, aquí tienes algunas razones:
Sin información sobre los errores
Cada lenguaje de programación web cuenta con sus reglas específicas para programar. Cuando implementamos una hoja de estilo de CSS, empezamos por el nombre del selector (por lo general clase, id, atributos), seguido por una llave, después la declaración del estilo dentro de las llaves, y después de cada línea, el típico punto y coma.
.class {
color: #fff;
background-color: #000;
}
Algunos lenguajes de programación web son muy estrictos con sus reglas. En el caso de no cumplirlas te devolverá un error. Pero CSS no. CSS ni te informa, ni te muestra errores por pantalla. Es posible que te falte un punto y coma después de una declaración, o que e te haya olvidado cerrar las llaves, o que hayas escrito el nombre del selector mal... Da igual lo que hagas, CSS no te avisará de nada.
En PHP, cuando tienes un error, se te informará de qué error es, dónde ha ocurrido, y arreglarlo es mucho más sencillo. En CSS, cuando algo no funciona, tendrás que arreglártelas por ti mismo, aunque tengas una hoja de estilo de miles de líneas de código.
Sin variables
Javascript y PHP te permiten almacenar valores en variables. Contar con variables es sinónimo de ahorro de tiempo, y hace que tu código sea más manejable. Simplemente puedes modificar el valor en la variable en lugar que tener que ir modificando el valor en cada una de las líneas donde se ha utilizado.
Desafortunadamente, CSS no tiene variables. Quiero dejar claro que estamos hablando de CSS puro, está claro que los preprocesadores sí que tienen variables muy, pero que muy útiles. Y ya que hablamos de las variables de CSS puro (que las hay) todavía no están soportadas por todos los navegadores.
Antiguamente, muchos diseñadores web hacíamos lo siguiente para gestionar las paletas de color de nuestro CSS.
/*======= color scheme ==========*/ primary #000 secondary #ccc text #333 hover #aaa
Esto, sin embargo, nos obliga a ser ordenados con nuestro código debido a que cualquier fallo en el momento de reemplazar algún color al utilizar la herramienta buscar/reemplazar puede llevar al garete el diseño de una web.
La pesadilla de la compatibilidad con navegadores
La compatibilidad con los navegadores es el mayor problema de CSS, y es una auténtica pesadilla para los diseñadores de páginas webs en muchas ocasiones. A pesar del estándar publicado en W3C, los desarrolladores de navegadores aplican diferentes especificaciones CSS en sus aplicaciones. Esa es la razón por la que existen sitios web como CanIUse.com, para ver si ciertas características de CSS son compatibles con versiones de navegadores específicas.
Cuando un cliente te pide que la web sea soportada por navegadores antiguos, como IE6 o IE7, para un diseñador es lo mismo que cortarse las venas. Al final terminamos creando varias hojas de estilos que servimos a la web bajo una sentencia condicional. Después tendremos que hacer un montón de modificaciones en nuestro código original para que, las hojas de estilo para navegadores antiguos, no entren en conflicto con los navegadores modernos. Cuando realicemos todos los cambios, nos toparemos otra vez de cara con el problema número 1.
La especificidad de CSS
Los selectores de CSS cuentas con diferentes niveles de peso/especificidad. Vamos a echar un vistazo a este ejemplo:
p {
color: #000;
}
p {
color: #333;
}
Cuando dos selectores con la misma especificidad cuentan con los mismos estilos, como podemos ver arriba, el que está más por debajo sobrescribe a su predecesor. Pero cuando añadimos el selector de la clase, como .paragraph, tal que así...
p.paragraph {
color: #000;
}
p {
color: #333;
}
...independientemente de su posición, el parrafo tendrá su fuente de color #000 ya que es más específica.
Francamente, la especificidad de CSS es muy confusa. Es necesario estar atento al definir estilos y reglas. Es posible que tengas un selector con una mayor especificidad que sobrescriba a selectores menos específicos, teniendo que buscar al culpable durante horas antes de encontrarlo.
CSS VS Tu cliente
Como hemos dicho antes, CSS define los layouts de un sitio web, los colores, los tamaños y la tipografía utilizada, así que, en pocas palabras, define el aspecto de la web. Y aquí está el principal problema, el diseño es subjetivo. Tu cliente puede tener una perspectiva diferente a la tuya, y puede pedirte que se modifique 1px un día, y al siguiente 5px más.
¿Puedes hacer el rojo un poco más azul? ¿Puedes renovar mi logo pero que siga pareciendo el mismo? ¿Puedes hacerlo que sea un poco más oscuro, pero a la vez más ligero?
Romperte la cabeza contra la pared es poco cuando tienes que lidiar con clientes como estos.