Un sitio web puede basarse en varios lenguajes web, como HTML, CSS, JavaScript y PHP. Entre estos lenguajes, todos podemos estar de acuerdo en que CSS es el lenguaje más sencillo. CSS define los diseños, colores, tamaños y tipografía del sitio web de una manera sencilla. Es sencillo y no requiere una función lógica o condicional para su uso.
Pero quizás le sorprenda saber que, de hecho, CSS podría ser el lenguaje más difícil y muy problemático en algunos casos. ¿Cómo es posible? Bueno, estas son algunas de las razones.
1. Sin informe de errores
Cada lenguaje web sigue reglas específicas para escribir código. Cuando se trata de escribir reglas de estilo en CSS, comienza con el nombre del selector (generalmente clase, id, selectores de atributos), seguido de una llave, luego la declaración de estilo dentro de la llave y termina cada línea con un punto y coma.
.class {
color: #fff;
background-color: #000;
}
Algunos lenguajes web regulan estrictamente las reglas; de lo contrario, devuelve errores, pero no CSS. CSS no genera errores. Es posible que sin querer haya eliminado un punto y coma o una llave, o haya nombrado mal los selectores, y su diseño se rompa.
En PHP, se le informará cuáles son los errores, dónde ocurrió y solucionarlo es mucho más rápido. En CSS, estás solo, incluso si se trata de varios archivos CSS con miles de líneas de código.
2. Demasiado flexible
Aunque CSS parece fácil de aprender, hay algunos problemas en CSS que no siempre tienen una respuesta directa, como “¿Cómo se centra un objeto?”.
Hay varias formas de centrar un objeto con CSS. Podemos centrarlo usando un margen, relleno, flexbox o cuadrícula. Pero la aplicación dependerá del tipo de centro que nos gustaría lograr, el diseño general de la página, el tipo de objeto, si es una imagen, un elemento en línea o en bloque, un fondo, cómo está anidado el elemento y el entorno. posición del elemento.
Escalar y refactorizar CSS también es un problema que no es tan sencillo. A diferencia de un lenguaje de programación, la sintaxis CSS es declarativa y flexible. Podemos aplicar CSS directamente en el elemento, en la plantilla, en un archivo CSS o cargarlo desde un sitio externo. Puedes agregar estilos fácilmente en todas partes y aun así esperarás que tu página se cargue “OK”. Pero esto es exactamente lo que hace que la refactorización de CSS sea complicada, especialmente en un sitio web de gran escala.
Refactorizar CSS requiere disciplina adicional y debes tener cuidado al cambiar el color con buscar/reemplazar ya que podrías borrar accidentalmente uno que no debería ser reemplazado. Como no arroja ningún error, a menudo no te das cuenta hasta que uno de tus usuarios te envía un aviso.
Esta es una de las razones por las que tenemos docenas de marcos, patrones y arquitecturas CSS a seguir, como Oreja, BulmaSass, LESS, BEM, CSS-in-JS y Utility-first para brindar a los desarrolladores un conjunto de pautas y reglas estrictas a seguir al componer CSS.
3. Pesadilla de compatibilidad del navegador
La compatibilidad del navegador es el mayor problema en CSS y, en ciertos casos, es una pesadilla para los diseñadores web. A pesar del estándar publicado por el W3C, los proveedores de navegadores implementan las especificaciones CSS de manera diferente.
Por eso los sitios web como CanIUse.com existe: para ver si ciertas características de CSS son compatibles con una versión del navegador o la siguiente.
Cuando se requiere soporte para navegadores más antiguos (como IE6 e IE7), generalmente a pedido del cliente, podríamos terminar teniendo que crear múltiples archivos y entregarlos a través de una declaración condicional, y luego hacer un montón de hacks de CSS para que el sitio parezca consistente. y similares vistos en navegadores más modernos. Al final del día, el problema número 1 nos mantendrá atrapados en esta pesadilla.
4. Especificidad de CSS
Los selectores de CSS tienen diferentes niveles de peso/especificidad. Echemos un vistazo a este ejemplo:
p {
color: #000;
}
p {
color: #333;
}
Cuando dos selectores con igual especificidad tienen los mismos estilos, como se muestra arriba, el que viene después sobrescribe a su predecesor. Pero cuando agregamos un selector de clases, digamos .paragraph, así.
p.paragraph {
color: #000;
}
p {
color: #333;
}
…independientemente de su posición, el párrafo al que se le asigne clase de párrafo tendrá el color #000, por ser más específico.
Francamente, la especificidad de CSS es realmente confusa. Debes estar atento al definir las reglas de estilo. Puede haber un selector con una especificidad más alta que sobrescribe los selectores menos específicos, dejándote buscando al culpable durante horas antes de localizarlo.
5. CSS versus su cliente
CSS define el diseño, los colores y los tamaños del sitio web y es cercanamente relacionado con el aspecto de un sitio web. Aquí radica el problema: el diseño es subjetivo. Su cliente puede tener una perspectiva diferente sobre el “aspecto” y puede pedirle que elija 1 px hoy y 5 px al día siguiente. Si estás tratando con un cliente del infierno, estás condenado.
“
¡GAH! Golpearse la cabeza contra la pared parece un paseo por el parque cuando se trata de clientes como estos.
Envolver
CSS puede ser simple y relativamente fácil de aprender. Pero, Necesitamos ser disciplinados y consistentes. para que pueda volverse más manejable. ¿Tienes problemas con CSS? Compártelos con nosotros a continuación.
