5 conceptos de CSS que debes saber
¿Crees que CSS es difícil? Pues todos hemos pensado lo mismo, pero no tiene que ser así! una vez que aprendas los conceptos fundamentes sobre CSS, vas a ser capaz de trabajar eficientemente con CSS.
Clarificación: saber CSS no quiere decir que diseñes páginas web bonitas, pero si te va a ayudar a convertir diseños en paginas web de manera eficiente.
Box model
En CSS, todos los elementos son tratados como cajas. El navegador determine al alto y ancho de cada caja calculando estas propiedades (contenido, relleno, borde y el margen). Como se muestra en la siguiente imagen.
Cada navegador tiene predefinidas reglas de CSS llamadas “user agent stylesheets”. Por ejemplo, la mayoría de elementos tienen el estilo
display: block;
mientras la etiqueta<span>
tiene el estilodisplay: inline;
Cada caja se muestra basado en que valor tiene la propiedad “display”, por ejemplo cuándo uno utiliza “inline”, todas las propiedades que definen el alto y ancho son ignoras exceptuando el borde.
Pregunta de entrevista: ¿Cuál es la diferencia entre un div y un span?
Respuesta: por defecto los “div” usan el display “block” mientras que el span utiliza el “inline” y como lo dijimos previamente, cuando se usa “inline” las propiedades como margin, padding, width, height no tienen efecto.
Selectores
Selectores son usados para “seleccionar” los elementos a los cuales se les aplicará un estilo. Existen muchos selectors, pero entre los más comunes estan:
Selector de element:
p
Selector de clase:
.some-class-name
Selector de ID:
#unique-id
Atributo de datos:
[data-key='some-value']
Además uno puede hacer combinaciones de selectores, por ejemplo:
En el ejemplo previo, el navegador primero encuentra todos los elementos “div” y de esa lista, busca cual div tiene un “unique-id”
🚨 El navegador lee los selectores de derecha a izquierda🚨
Aquí puedes ver la lista completa de selectores.
Cascada
Es posible tener diferentes selectores que se aplican al mismo elemento. En esos casos hay 4 reglas que determinaran cual CSS se aplicará.
Por ejemplo, sabes cuál es el color de background que tendrá el body?
Si no tienes idea, esta es la lista de cosas que debes saber sobre “cascading”
En primer lugar tenemos el orden del selector y en que posición en el código fuente esta, la respuesta para el ejemplo anterior es Azul, lo que se defina de último tiene más predominancia.
En segundo lugar tenemos la especificidad de CSS. Más adelante lo veremos.
Tercero, es el origin de los selectores (en la siguiente imagen, de izquierda a derecha se determina cual es más específico)
Y finalmente, tenemos !important
que va a sobre-escribir cualquier estilo aplicado a un selector con mayor especificidad
Especificidad
Cada selector tiene una puntuación, y basado en eso, el navegador determina cual selector tiene más relevancia. Pero como una imagen vale más que mil palabras, en la siguiente imagen puedes ver la lista completa y puntuación que tiene cada selector. (La fuente de la imagen esta al pie de la imagen)
Layout
El objetivo principal de un layout es ordenar como se muestran todas las “cajas” en la pantalla. Por defecto, los navegadores tratan de acomodar cada cada de arriba hacia abajo, de izquierda a derecha, pero claramente puedes cambiar este comportamiento.
Previamente hemos hablado de la propiedad “display” y dos posibles valores “block | inline”. Además de esos valores, puedes usar “inline-block” que te permite tener multiples elementos en la misma linea, sin hacer un “salto de linea”.
Por otro lado, recientemente", se agregaron el Flexbox y CSS Grid que permiten otras maneras de acomodar el contenido. La principal diferencia entre ambos es que Flexbox solo trabaja con un eje, vertical ú horizontal, mientras CSS Grid te permite acomodar las cajas en multiples ejes.
Puedes aprender sobre Flexbox aquí (es un juego! 🎮🔥) y sobre CSS Grid aquí (y adivina? es otro juego)
Además existen otras dos maneras de acomodar los elementos en una página: utilizando flotantes, dónde se pueden poner elementos a flotar a la izquierda o derecha.
Y la otra opción es mediante posicionamiento. Por defecto, todos los elementos tienen un posicionamiento relativo al elemento padre. Existen otros valores como “absoluto” que te permite mover el elemento usando propiedades como (top, left, right, bottom), donde el elemento se mueve basado en el primer ancestro relativo que encuentre, si no encuentra uno, utiliza el body.
Y finalmente, esta la posición fija, alguna vez has notado que cuando visitas un sitio web y haces scroll, la navegación del sitio se queda fija? Eso es debido a que utiliza un posicionamiento “fixed”, por lo cual el contenido siempre esta en el mismo lugar independientemente de si el usuario hace scroll o no
Conclusión
Claramente todavía pienses que CSS es difícil, pero si algo quiero que te lleves, es que dedicar tiempo a aprender los fundamentos de como funcionan las cosas, todo problema y posible solución empiezan a tener más sentido.
Puedes aplicar este consejo en cualquier tecnología que utilices para ser eficiente. Déjame saber en los comentarios si tienes alguna duda o quieres que abarquemos un tema más a fondo.