Lo admito, no soy muy bueno con los CSS.
Mi declaración text-align: center sólo funciona a veces. Añado padding (relleno) alrededor de un elemento usando margin: 50px pero, de algún modo, sólo aparece en los laterales.
Declaro position: absolute en un elemento y le añado top: 0px. Y el elemento va arriba del todo de la página, en vez del lugar donde creo que debería.
¿Sabes por qué? Los CSS no funcionan del modo en que creemos que deberían porque pensamos que sabemos CSS, pero en realidad no. Si eso te suena familiar, es parecido a como luchamos con el JavaScript con la excepción de que a los CSS le damos menos importancia.
Los CSS no se ven como deberían
Cuando empezamos a aprender desarrollo web, los CSS tienden a quedar en un segundo lugar.
Podría ser una frase gratuita, pero creo que es la experiencia que todos hemos tenido, sencillamente porque nos centramos en conseguir el mínimo producto viable (es decir, algo que funcione) para poder demostrar nuestra habilidad.
Piensa cuanto tiempo le has dedicado a aprender CSS comparado con cualquier otro lenguaje.
No vemos que aprender CSS sea una prioridad porque:
- CSS es muy tolerante con los errores, así que nuestra aplicación aún funciona a pesar de declaraciones y sentencias erróneas.
- Las librerías CSS son una solución sencilla para dar estilo a una web.
- Hay demasiadas cosas que aprender en programación.
CSS es tolerante a errores
Mi primera impresión acerca de CSS cuando empece a estudiarlo es que era un lenguaje impredecible. Me dio la falsa impresión de ser un lenguaje sencillo por que sucede ‘magia’ cuando escribes un selector y una declaración:
p {
color: blue;
}Como todo lo bueno tiene un final, tras la euforia inicial de ser capaz de manipular estilos con CSS, pronto me encontré en la situación que cualquiera que ha trabajado con CSS acaba encontrado: cuando una declaración de un elemento no funciona.
a {
margin-top: 10px;
}Afortunadamente para nosotros, y no tanto para el lenguaje, incluso cuando una declaración está mal escrita, el contenido aún se muestra en pantalla. Probablemente por eso pensamos que no es crítico aprender bien CSS.
Para agravar el problema, a menudo tenemos que aprender librerías CSS para tener una idea de como funciona CSS. Al menos es lo que experimentamos mis colegas y yo durante nuestro curso de desarrollo web.
Bueno con librerías CSS = Bueno con CSS
Las librerías CSS nos permiten crear rápidamente una web o una interfaz para una aplicación. Sin embargo, pienso que aprender a usar librerías CSS antes de conocer bien el propio CSS mina nuestro aprendizaje.
En mi curso, no pasamos demasiado tiempo aprendiendo HTML y CSS antes de pasar a las librerías CSS. Entiendo los motivos para ello, pero al hacerlo tuvimos la falsa impresión de que sabíamos CSS cuando en realidad solo sabíamos usar librerías CSS.
Echa un vistazo a Bootstrap. Los elementos HTML tienen el estilo que queremos añadiéndoles clases. En CSS, con eso no has hecho ni la mitad del trabajo.
Recuerdo pasarlo realmente mal cuando tuve que trabajar en un proyecto con sólo JavaScript y CSS. No entendía como era posible que fuera tan difícil crear una barra de navegación ‘responsive’ (adaptable) cuando era tan fácil con Bootstrap.
Demasiadas cosas que aprender
Otra razón por la que no conocemos bien CSS es que tenemos demasiadas cosas que aprender. Tenemos que priorizar nuestro tiempo. Como CSS es un lenguaje más tolerante y parece menos crítico que la programación, le dedicamos menos tiempo.
Tan sólo observa los ficheros de tu aplicación y veras que CSS es sólo una pequeña parte de lo que conforma una aplicación. ¡Incluso podemos crear una aplicación que no necesite CSS para funcionar!
Así pues, se tiende al enfoque de ensayo y error cuando creamos CSS. En el corto plazo nos ahorra tiempo y esfuerzo que podemos dedicar a otras áreas.
Sin embargo, a largo plazo, es mejor invertir tiempo en aprender CSS para poder escribirlo mejor, más rápido y con confianza.
Esto también reduce la probabilidad de caer en el síndrome del impostor con los CSS (aunque en este caso, uno realmente es un impostor).
… porque no lo conocemos bien
Los CSS no funcionan porque no los conocemos bien.
Ahora que sabemos porque no funcionan los CSS, podemos hacer algo al respecto. En lugar de permanecer felices acerca del status quo, podemos trabajar para reaprender CSS y reducir el tiempo que pasamos intentando adivinar por qué no se ve bien.
Esto nos hará desarrolladores más completos y mejores. CSS no es difícil de aprender. Tan sólo requiere que le dediquemos algo de tiempo para ver como funciona.
Si estás pensando en tomar un curso de desarrollo web, te recomiendo que aprendas CSS en primer lugar.
Estos cursos están estructurados de manera que se centran en el objetivo final de ser capaz de construir una aplicación. No se centran en el proceso de aprendizaje.
Respuestas a por qué mi CSS no funciona
¿Estás interesado en saber por qué tu CSS no funciona? Puedes ver este CodPen con algunos ejemplos, las respuestas están al final.
- Mi declaración text-align: center sólo funciona a veces.
text-align: center funciona siempre. Si algo ya está centrado, no se verán cambios.
- Añado padding alrededor de un elemento usando margin: 50px pero sólo se añade a los lados.
Estaba aplicando la declaración a un elemento inline. Dado que los márgenes verticales no tendrán ningún efecto sobre elementos ‘inline’ y no ‘replaced’, de acuerdo con la W3C, margin-top: 50px y margin-bottom: 50px se ignoran, mientras que margin-left: 50px y margin-right: 50px se mostrarán.
- Declaro position: absolute en un elemento y añado top: 0px. El elemento se va arriba del todo de la página en vez del lugar donde creo que debería.
Quería que un elemento ‘sibling’ (hermano) se posicionara sobre otro elemento sibling y pensé que podría posicionar un sibling y añadir position: absolute y top: 0px en el otro para que se superpongan. Desgraciadamente, la propiedad position sólo funciona con elementos padre e hijo.
Si quiere leer más ejempos de por qué CSS no funciona y los motivos detrás de ello, permance atento a nuevos artículos.
Puedes leer el artículo original en inglés en https://medium.com/better-programming/why-doesnt-my-css-work-the-way-it-should-e2313815520a