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:

Cómo alinear las cosas en CSS

Imprescindible el artículo How To Align Things In CSS:

There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.

Los consejos que da son:

To wrap up, I have a quick summary of the basics of alignment. If you remember these few rules, you should be able to align most things with CSS:

  1. Are you aligning text or an inline element? If so, you need to use text-align, vertical-align, and line-height.
  2. Do you have an item or items you want to align in the center of the page or container? If so, make the container a flex container then set align-items: center and justify-content: center.
  3. For Grid Layouts, the properties that start with align- work in the Block direction; those which start with justify- work in the inline direction.
  4. For Flex Layouts, the properties that start with align- work on the Cross Axis; those which start with justify- work on the main axis.
  5. The justify-content and align-content properties distribute extra space. If you have no extra space in your flex or grid container, they will do nothing.
  6. If you think you need justify-self in Flexbox, then using an auto margin will probably give you the pattern you are after.
  7. You can use Grid and Flexbox along with the alignment properties for tiny layout jobs as well as main components — experiment!