CSS

Las hojas de estilo en cascada llegaron al mundo de la web bastante más tarde que el lenguaje HTML. Aunque fue propuesto en 1994 el primer estándar no llegaría hasta prácticamente entrado 1997. Sería CSS 1.

Obviamente, CSS 1 supuso un gran avance para el mundo del desarrollo de páginas web, pero lo cierto es que para entonces los diseñadores se habían acostumbrado a mezclar el contenido con la presentación, por medio del uso de etiquetas HTML que estaban presentes y seguían funcionando en los navegadores. Además CSS 1 había sido presentado con bastantes carencias, lo que hizo que se tuviera que presentar un nuevo estándar rápidamente. Así fue como sería liberado como recomendación CSS 2 pasado apenas un año, en 1998.

A partir de este punto el mundo de los estándares abiertos para la web tuvo un parón generalizado. No solo CSS, sino HTML y otros lenguajes como Javascript. CSS 2 tuvo una revisión publicada como CSS 2.1 en la que añadieron algunos selectores nuevos, pero pasaron años antes de la presentación de una nueva versión. Con todo entramos en una etapa oscura en la que CSS no llegó a cubrir totalmente sus objetivos.

• La compatibilidad de CSS no era la misma en todos los navegadores
• Los navegadores se dedicaban a incorporar funcionalidades por medio de prefijos, que hacían más difícil y tedioso escribir el CSS.
• El estándar no cubria todas las necesidades de los diseñadores

Con todo, los diseñadores y desarrolladores web tenían que usar los famosos "hacks de CSS", que no eran más que artimañas para conseguir los resultados deseados de maneras poco ortodoxas, que acababan en un código complejo y muy orientado a atender necesidades de navegadores determinados. Por poner un par de ejemplos, se tenía que usar capas anidadas a varios niveles para conseguir cosas como los bordes redondeados, Javascript para conseguir tamaños de fuentes adaptables, imágenes con transparencia en canal alfa (PNG) para conseguir sombras, etc. Al final conseguir un diseño medianamente atractivo y homogéneo a lo largo de los navegadores solo con CSS era muy complicado y se tenía que continuar variando el HTML o el Javascript para solucionar sus carencias.

La aparición de CSS 3 sólo se materializó en el año 2014 con el movimiento de HTML 5. Vendría a aportar soluciones a la mayoría de las necesidades de los diseñadores y a permitir finalmente cubrir el objetivo principal del lenguaje, la separación del contenido de la presentación. No obstante cabe decir que CSS 3 se presentó por medio de un nutrido grupo de especificaciones, que han ido mejorándose e incrementándose hasta la fecha, por lo que no es tanto un lanzamiento puntual, sino una continua mejora del estándar a diversos niveles.

Hoy podemos decir que CSS cubre las necesidades de los diseñadores, más aún después de la aparición de CSS Flexbox, que permite agregar una facilidad enorme a la hora de colocar los elementos en la página. Junto por supuesto del último aporte a las especificaciones de CSS Grid System, que por fin ha aportado un completo y versátil sistema de rejilla a la web, mediante el cual los diseñadores web disponen de herramientas verdaderamente potentes para posicionar los elementos en la página, de manera independiente a como estos aparezcan en el código HTML.

El enfoque de CSS es servir para definir la capa de presentación, es decir, la parte relacionada con el aspecto. Es algo que cualquier estudiante suele tener claro cuando está aprendiendo CSS, ya que al enseñar HTML probablemente se haya insistido, pero que siempre conviene reforzar.

En el código HTML colocamos el contenido, es decir, qué debe visualizarse, mientras que con CSS definimos la presentación, es decir, cómo debe visualizarse. Esto nos lleva a una serie de usos de CSS que debemos de respetar como buenas prácticas.

• Lo adecuado cuando trabajamos con CSS es escribir el código en ficheros independientes, que tendrán extensión .css. Cada cosa en su lugar!
• No conviene colocar código CSS por tanto dentro de archivos HTML. Debemos evitar colocar estilos en etiquetas <style> dentro del propio código HTML.
• Por supuesto, mucho menos aconsejable es colocar estilos en los atributos "style" de las etiquetas HTML.

Para que una página de contenido gane un aspecto determinado, necesitaremos un medio para cargar o asociar el CSS dentro de un HTML. Esta operación se puede realizar a varios niveles, pero lo más habitual es enlazar el CSS por medio de la etiqueta <link>

<link rel="stylesheet" href="/css/app.css">

Esa etiqueta generalmente se pone en el <head>, para que el CSS se cargue desde el inicio y permite que la página HTML se presente con el estilo definido en el archivo CSS enlazado.

Generalmente esa misma etiqueta se colocará en todas las páginas del sitio web, con lo que se caragará el mismo archivo CSS con la misma declaración de estilos. Esto tendrá dos efectos importantes:

• Permite que todo el contenido de la web tenga un aspecto homogéneo, definido por medio de ese archivo CSS centralizado.
• Permite que contar con un sitio más optimizado ya se reutilizam las mismas declaraciones. Además generalmente el archivo .css se cacheará en el navegador, por lo que la segunda o siguientes páginas del sitio el archivo CSS no se necesita descargar de nuevo el archivo ahorrando transferencia de datos y mejorando la velocidad de carga.

Maneras alternativas de cargar el CSS

Existen otras maneras posibles para poder asociar el CSS a un documento HTML, no tan recomendables como la anterior, pero que resultan útiles si así lo necesitamos.

Usar la etiqueta <style>

Alternativamente el CSS se puede cargar también mediante una etiqueta <style> en la página donde se necesite ese CSS.

<style>
body {
 background-color: #eee;
 color: #303050;
}
p {
 margin-top: 0.2rem;
}
</style>

Esas declaraciones de estilos se aplicarán únicamente al archivo HTML que las contenga, pudiendo crear estilos que afectan a una única página.

Sin embargo, es preferible usar la etiqueta <link>, ya que así se consigue que el código CSS se cachee y, al situarse en un archivo único, si se cambia afectará a todo el sitio web, mejorando el mantenimiento.

Definiendo un atributo style en las etiquetas HTML

La última alternativa de colocación CSS es la denominada "CSS inline" que consiste en aplicar las reglas de estilo sobre las propias etiquetas a las que se quiera afectar, con el atributo style de la propia etiqueta.

<div style="margin-bottom: 2rem; border: 1px solid red; padding: 1rem">
   Contenido de la división…
</div>

Se debe evitar el CSS inline siempre que sea posible, ya que produce una mezcla innecesaria de la capa de contenido con la capa de presentación, perdiendo muchos de los beneficios que se obtienen en la separación de las capas y dificultando el mantenimiento y la optimización del sitio web.

Los selectores en CSS nos permiten acceder a cualquier elemento o grupo de elementos, para aplicar estilos sobre el/ellos en una única declaración. Como su nombre indica, permiten seleccionar aquellos elementos sobre los que se van a aplicar las reglas de estilo.

Dentro del código CSS podemos usar selectores y aplicarles un conjunto de estilos determinado. Para ello escribimos el selector y colocamos los atributos de estilos encerrados entre llaves:

selector {
  color: red;
  width: auto;
}

Existen selectores de lo más variado, que permiten ajustar de una manera.muy precisa qué elementos se desea seleccionar. Los más importantes son los siguientes:

• Etiqueta: sirven para seleccionar todos los elementos de una misma etiqueta o tag HTML.

h1 {
  font-size: 26px;
}

• Clase: selecciona todos los elementos de una clase determinada. (Class de CSS).

.destacado {
  font-weight: bold;
  color: orange;	
}

• Identificador: permiten seleccionar etiquetas individuales por el atributo Id de la etiqueta.

#fomularioAlta {
 border: 1px solid #99c; 
}

• Atributo: permiten seleccionar todas las etiquetas que tengan un atributo dado, o bien un atributo con un valor determinado.

[title] {
  text-decoration: none;
}

[align="center"] {
  border: 1px solid red;
}

Además, los selectores se pueden combinar entre sí para conseguir selectores mucho más precisos:

Estos selectores obtienen las imágenes que tengan el atributo alt y los párrafos que tengan la clase "desactivado".

img[alt] {
	border: none;
}

p.desactivado {
	color: #ddd;
}

También podemos relacionar los selectores con un espacio y entonces el significado cambia totalmente, ya que se estaría indicando que un elemento tiene que estar dentro de otro.

Este selector aplicaría estilos a todos los elementos <h2> que estén dentro de contenedores que tienen la clase "nota".

.nota h2 {
  font-weight: normal;
}

También podemos combinar los selectores de CSS usando una coma. Entonces estamos indicando que los atributos de estilo deben aplicarse a los dos selectores por separado.

Así estaríamos indicando que queremos aplicar estilos sobre todos los párrafos y todas las divisiones con la clase "bloque".

p, div.bloque {
	margin-bottom: 25px;  
}

Las propiedades de CSS son todas aquellas características de los elementos a las que podemos aplicar estilo. Desde un color de fondo a una anchura. El estilo determinado se aplica definiendo un valor sobre esa propiedad.

Por tanto, CSS se escribe definiendo selectores, sobre los que se aplican propiedades con sus valores. La sintaxis es la siguiente:

selector {
    nombre-de-propiedad: valor;
}

Para poder dominar CSS debemos conocer una gran cantidad de propiedades, que nos permitirán definir valores de estilos sobre cada aspecto particular de un elemento. No obstante, no es necesario obsesionarse con aprender todas las propiedades y sus posibles valores, porque es algo que poco a poco interiorizaremos con la práctica a lo largo de nuestro trabajo.

Los preprocesadores son herramientas indispensables para el desarrollo frontend actual. Permiten desarrollar CSS de una manera más ágil pero sobretodo crear un código más mantenible.

Para ello los preprocesadores extienden las características del lenguaje CSS, permitiendo uso de variables, funciones (mixins) diversas otras formas de acortar la escritura del código.

Los preprocesadores no se ejecutan en el entorno del navegador. En lugar de ello se procesan, compilando su código en código CSS estándar que si es capaz de entenderlo cualquier navegador. En ese proceso de compilación a menudo se incluye además una serie de mejoras en el código CSS como la minimización.

los preprocesadores más comunes son Less y Sass. Siendo Sass el más extendido en la comunidad frontend con diferencia.

Los frameworks CSS, a veces también llamados frameworks de diseño son herramientas que nos permiten implementar un marco de trabajo sólido sobre el que desarrollar la parte estética de los proyectos web. Ofrecen diversas ventajas, entre las que destacan dos principales:

• La agilidad para la generación de los estilos CSS y el aspecto estético de los sitios y aplicaciones web.
• La creación de un tema gráfico, que se puede mantener a lo largo de todo un sitio o aplicación, generando una mayor consistencia en el diseño.

Los frameworks CSS permiten por tanto un desarrollo optimizado, que además es muy útil en proyectos empresariales, donde sea necesario seguir una misma línea de diseño por varios desarrolladores.

Dentro del mundo de los frameworks CSS encontramos dos tipos principales:

Frameworks basados en componentes: que ofrecen una base de código CSS que permite crear fácilmente, por medio de clases, multitud de componentes como botones, listas, pestañas, menús desplegables, formularios estilizados, etc. Dentro de esta clasificación el framework más relevante es Bootstrap.

Frameworks basados en clases de utilidad: también llamados "utility first frameworks", que ofrecen una cantidad enorme de clases de utilidad atómicas, pensadas para aplicar un valor concreto a una propiedad determinada del CSS. Una clase de utilidad por si sola hace poco (podría ser simplemente un margen de 1 rem en la parte de abajo), pero mediante la combinación de diversas clases de utilidad se pueden genera todo tipo de interfaces de usuario totalmente personalizadas. Dentro de esta clasificación encontramos Tailwind CSS.

La ventaja de los frameworks basados en componentes es que te dan mucho trabajo de estilos ya prefabricados, con temas de diseño muy definidos. Sin embargo, los frameworks basados en componentes en ocasiones también representan algunas desventajas, como mayor rigidez a la hora de desarrollar y dificultad para conseguir que el diseño de varios proyectos que usan el mismo framework se distingan unos de otros.

La ventaja de los frameworks basados en clases de utilidad es que el diseño que se consigue con ellos es totalmente único para cada sitio web, pero sin embargo la desventaja es que usan muchas clases para poder aplicar estilo a los elementos de la página.