El soporte estándar de CSS en los navegadores y sus posibilidades han evolucionado muchísimo desde que yo empecé con esto a principio de los dosmiles, así que me dio por pensar en la suerte que tienen las nuevas generaciones de tener tanto poder en sus manos.
Pero por otro lado, también caí en la cuenta de que, si hoy en día tuviese que aprender desde cero todo lo que he ido aprendiendo en los últimos 15/20 años, realmente sería abrumador.
CSS es mucho más potente y profundo de lo que muchos desarrolladores creen o van a querer reconocer. Y cualquiera que lo quiera abordar seriamente para maquetar webs, como he dicho, realmente puede sentirse abrumado y caer en la tentación de solo rascar la superficie.
Por eso, he recopilado unos cuantos puntos clave que me parecen importantes para intentar transmitírselos a cualquiera que se esté iniciando en serio en la maquetación web.
No se trata de decirte qué debes hacer o no porque sí. Son cosas que considero que, si alguien me las hubiese explicado bien en su momento, me habrían ahorrado mucho tiempo y penurias.
Ojalá te sean útiles.
1- Todo está conectado
Los siguientes puntos se interrelacionan entre sí. No los tomes como puntos aislados.
En CSS todo está conectado, una mariposa aletea en Pekín y a ti te aparece un scroll dentro de un div con el que no contabas.
Estos puntos que he recopilado me parecen importantes después de más de 15 años usando CSS a diario, tanto diseñando webs, como emails y aplicaciones web.
Son conceptos sobre los que cualquiera que esté empezando es fácil que pase de puntillas en el afán de aprender rápido.
2 - El modelo de caja (Box model)
Todos los elementos HTML son cajas que vamos colocando como buenamente podemos usando CSS.
A cada una de estas cajas se le pueden definir un montón de propiedades: altura, anchura, márgenes internos y externos, borde...
En la guerra de los Navegadores de los años 90 (y principios de los 2000) había dos modelos de caja luchando frente a frente y una misma propiedad te podía dar resultados distintos según el navegador.
En cambio, ahora puedes usar el que más te convenga según tus intereses en diferentes elementos de la misma página.
El tema es estudiarlo y conocerlo bien. Es muy importante porque pueden ser una fuente de errores absurdos que te traigan de cabeza.
En cambio, conocerlo bien puede ahorrarte escribir mucho código.
Es tan importante que en el curso de HTML y CSS nuestro tutor José Manuel Alarcón le dedica un módulo entero.
3 - Unidades de medida relativas y absolutas
Y para sacarle todo el provecho al modelo de caja, nada mejor que conocer bien las unidades de medida que puedes usar. Hay muchas: px, em, rem, ch, vw, vh...
Saber cuáles son, cómo funciona cada una y probarlas bien hará que descubras las grandes ventajas usar la idónea en cada momento.
4 - Conocer el flujo o la importancia de tener Flow
En el navegador los elementos HTML se van colocando siguiendo una cierta pauta según aparecen en el documento. Para abreviar, es como si existiese un imán arriba a la izquierda que los va atrayendo sin remedio y ellos se van colocando en función de su tamaño y el espacio disponible.
Nota: esta metáfora solo sirve para sistemas occidentales donde la dirección de lectura va de izquierda a derecha y de arriba abajo. Para otros sistemas y lenguas esto puede variar y además se le pueden asignar estilos específicos en función de la dirección de lectura.
Algunos elementos también pueden variar su colocación en función de si son elementos de línea o de bloque.
Investiga bien los valores de la propiedad display. Hasta aquí puedo leer.
Frente al navegador: be water, my friend
Para maquetar una web, necesitarás surfear bien el flujo.
Esto es, recolocar elementos incluso sacándolos del flujo, pero que de alguna forma se siguen relacionando con él.
Si entiendes bien estas relaciones y empiezas maquetando para móviles (lo que se conoce como mobile-first) podrás crear webs fluidas que se adapten a cualquier contenido y resolución de pantalla con mucho menos código.
Menos código supone menos errores y más flexibilidad presente y futura.
Aprende bien cómo usar float , flexbox y grid para que el navegador trabaje para ti y tu web se adapte a él como el agua se adapta a una jarra.
5 - Posicionamiento
Seguimos con el flujo. Se puede hacer caso omiso de este flujo completamente. Es posible sacar elementos fuera del flujo y colocarlos donde quieras en función de otros elementos.
Es como convertirse en superhéroe y poder volar hacia donde quieras.
Pero ojo, sin abusar. Todo poder conlleva una gran responsabilidad. Si empiezas a acumular elementos posicionados de forma fija o absoluta te puedes llevar desagradables sorpresas si no sabes cómo usar bien z-index.
La clave: entender cómo funcionan los contextos.
6 - Cascada y Herencia
Imagínate que te cae un bote de pintura en la cabeza. La mayoría de la pintura se te queda en el pelo, pero poco a poco va bajando y te van salpicando gotas hacia los pies.
CSS funciona de forma parecida, las propiedades se van aplicando en cascada según el orden que aparecen en la hoja de estilos (igual que se desparrama la pintura), pero además va salpicando hacia abajo a sus elementos hijos y otros descendientes.
Esto es lo que se llama herencia, algunas propiedades se heredan de padres a hijos, y para poder modificarlas tienes que hacer reglas CSS más específicas.
Por suerte esto es menos aleatorio que las salpicaduras de pintura, pero hay que conocer bien sus reglas inflexibles.
7 - Selectores (y compañía)
¿Y cómo aplicamos las reglas específicas? Con los selectores.
Los selectores ayudan a especificar a quién le quieres aplicar una determinada propiedad.
Los más conocidos son las clases (.) y los identificadores (#) pero hay mucho más y todos muy útiles: de atributo, para seleccionar elementos hijos, para elementos adyacentes... Pero además están sus "primos": pseudoelementos, pseudoselectores, contadores...
Y lo mejor, los puedes combinar entre ellos para lograr lo que quieras como si fuesen piezas de Lego.
En CSS solo hay una cosa que no se puede hacer con los selectores (y probablemente nunca se podrá), y es volver atrás en el árbol del documento para seleccionar al elemento padre.
Para todo lo demás, seguro que existe una forma de hacerlo, pero requiere conocer bien los selectores.
Especificidad
¿Cómo sabemos si una regla es suficientemente específica? Vale, si consigues sobrescribirla y que se apliquen sus propiedades será más específica, pero no es simplemente eso lo que queremos.
Hay normas muy claras sobre cómo se cuenta la especificidad según el selector que usemos.
Lo interesante es usar siempre la mínima especificidad posible por si necesitamos volver a sobrescribirla.
Así tu hoja de estilos será lo más sencilla posible y evitarás recurrir a los nocivos !important.
Despedida y cierre
Por supuesto que maquetar con HTML y CSS es mucho más que todo lo nombrado aquí, pero he intentado ceñirme a lo que considero los aspectos más importantes y a los que no se les suele dar la importancia que merecen.
Si consideras que me he dejado algo atrás, estaré encantado de escuchar tus sugerencias en los comentarios.
Por otro lado, si quieres aprender a maquetar bien con HTML y CSS, no puedo dejar de recomendarte nuestros dos cursos: el curso de "HTML y CSS para desarrolladores" y el de Maquetación Responsive.
Todos los consejos de este post se explican y desarrollan en detalle (entre otros muchos más conceptos importantes) a lo largo de estos cursos. Escoge el primero de ellos si partes de cero, y el segundo si ya sabes HTML y CSS y quieres modernizarte. Te permitirán aprender poco a poco, con seguridad y con la posibilidad de consultar dudas directamente a auténticos expertos.
La base que obtendrás con estos cursos no solo te servirá para tus proyectos de hoy, sino que te permitirá incorporar con solvencia cualquier novedad futura en los estándares de HTML y CSS.
Fecha de publicación: