Herramientas para auditar CSS

Muy interesante lo que se explica en CSS Auditing Tools:

How large is your CSS? How repetitive is it? What about your CSS specificity score? Can you safely remove some declarations and vendor prefixes, and if so, how do you spot them quickly? Over the last few weeks, we’ve been working on refactoring and cleaning up our CSS, and as a result, we stumbled upon a couple of useful tools that helped us identify duplicates. So let’s review some of them.

El lenguaje que casi se convierte en CSS

Muy interesante el artículo The Languages Which Almost Became CSS que dice:

When HTML was announced by Tim Berners-Lee in 1991 there was no method of styling pages. How given HTML tags were rendered was determined by the browser, often with significant input from the user’s preferences. It seemed, however, like a good idea to create a standard way for pages to ‘suggest’ how they might prefer to be rendered stylistically.

But CSS wouldn’t be introduced for five years, and wouldn’t be fully implemented for ten. This was a period of intense work and innovation which resulted in more than a few competing styling methods which just as easily could have become the standard.

While these languages are obviously not in common use today, I find it fascinating to think about the world that might have been. Even more surprisingly, it happens that many of these other options include features which developers would love to see appear in CSS even today.

Maquetación minimalista con CSS

En 1-Line Layouts se presentan 10 técnicas básicas de maquetado con CSS que ocupan muy poco:

  1. Super Centered place-items: center
  2. The Deconstructed Pancake flex: 0 1 <baseWidth>
  3. Sidebar Says grid-template-columns: minmax(<min>, <max>) …
  4. Pancake Stack grid-template-rows: auto 1fr auto
  5. Classic Holy Grail Layout grid-template: auto 1fr auto / auto 1fr auto
  6. 12-Span Grid grid-template-columns: repeat(12, 1fr)
  7. RAM (Repeat, Auto, Minmax) grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
  8. Line Up justify-content: space-between
  9. Clamping My Style clamp(<min>, <actual>, <max>)
  10. Respect for Aspect aspect-ratio: <width> / <height>

También hay un vídeo: