El espacio en CSS: margin & padding

En el artículo Spacing in CSS, Ahmad Shadeed hay una amplia y detallada explicación sobre el espacio en CSS, hablamos de margin y padding, dos atributos que a veces producen fenómenos extraños si no conocemos su funcionamiento correcto.

Paletas de colores CSS con el esquema de color HSL y la función calc()

Un artículo interesante Creating Color Themes With Custom Properties, HSL, and a Little calc(), sobre un par de ideas que llevo dándole vueltas durante algún tiempo. Elementos:

  • Variables CSS
  • Usar el esquema de color HSL en lugar del hexadecidal.
  • La función calc() de CSS

Los motivos:

  • La insuperable ventaja de trabajar con HSL en CSS frente a hexadecimal a la hora de trabajar con el color.
  • La posibilidad de usar y reutilizar variables en CSS (y el ahorro de trabajo que supone)
  • La función calc() que permite automatizar cálculos de colores.
  • Y principalmente, porque los navegadores que no interpretaban estas características, están en el limbo

Habrá quien dirá que con SASS y similares, ya se puede hacer lo mismo, pero no siempre se tiene libertad para poder instalar lo necesario y poder utilizarla. No lo digo yo, lo dice un amigo.

Obviamente mi sistema de utilizar inkscape para crear variaciones de color (en tono, o luminosidad) haciendo cajitas para tener de un vistazo la paleta que uso, se puede mejorar mucho 🙂

Frameworks CSS sin clases

Leyendo el breve artículo No-Class CSS Frameworks, me ha recordado algo que encontré (y alabé) hace algunos años: El CSS Grid mínimo: ungrid.

La lista de frameworks CSS —una denominación tal vez demasiado pretenciosa, para tratarse sólo de una hoja de estilos—, es la siguiente:

Y creo que merece algo más que darle un vistazo. Keep It Simple, ya sabemos.

Evolución del diseño web, desde los 90 hasta el presente

Reseño el artículo en marzo del año 2020. Yo empecé en el 2001 como desarrollador web. Ha pasado mucho tiempo, la web a evolucionado mucho, y se nota.

En Old CSS, new CSS, Evelyn Woods muestra algunos hitos reseñables desde que comenzó en la profesión, hasta la actualidad. Se centra en CSS, que honestamente creo que dentro de los estándares, es lo que más ha cambiado (detrás andaría ECMAScript, en mi opinión).

La perspectiva que te ofrece el haber vivido en primera persona todos los cambios que se han sucedido en el diseño web, y explicarlo de la manera en que lo hace, provoca que el artículo sea una lectura más que recomendable, para los que llevan un tiempo similar a la autora, y también para los que llevan menos tiempo.

Es nuestra historia. Con sus cosas buenas y sus cosas malas.

Recuerda: Old CSS, new CSS.

Metodología BEM: Block, Element, Modifier de CSS

La metodología BEM fue desarrollada por el equipo que trabaja en yandex (una empresa de tecnología de origen ruso).

El objetivo principal de la metodología es mejorar la organización de CSS utilizando una nomenclatura para los nombres de clases compuesto por:
* El nombre del bloque HTML
* El elemento dentro de ese bloque
* Un modificador, que define la apariencia, estado o comportamiento.

Veamos un ejemplo (adaptado de la documentación oficial):

<!-- bloque `search-form` -->
<form class="search-form">
    <!-- elemento `input` element del bloque `search-form` -->
    <input class="search-form__input">

    <!-- elemento `button` del bloque `search-form` -->
    <button class="search-form__button">Buscar</button>
</form>

Ventajas:
* Ofrece un sistema para organizar y nombrar clases.
* Permite trabajar de forma coordinada y asíncrona a los miembros de un equipo.
* Permite conocer de un vistazo la estructura, tanto del documento HTML, como de las clases CSS.
* Permite evolucionar y modificar elementos con facilidad (creando clases de modificadores)

Inconvenientes:
* Hay que ajustarse a las normas y reglas de la metodología.
* La cantidad de clases utilizadas puede ser más elevada que otras alternativas.
* La teoría de que cambiando una clase se cambia el aspecto de una web, no aplica aquí: para ser coherente hay que crear clases que modifique el aspecto de los elementos, y añadirlos al código HTML.