<figure class="rounded-xl bg-slate-100 p-8 dark:bg-slate-800" />
background-color: #f1f5f9;
border-radius: 0.5rem;
padding: 2rem;


@media (prefers-color-scheme: dark) {
  background-color: #1f2937;
}

Metodologías CSS

⭐ CSS de Utilidades en Primer Lugar

Animo a todos a probar un enfoque de CSS estrictamente basado en utilidades mientras trabajan en Aplicaciones impulsadas por Hypermedia porque ofrece numerosos beneficios tanto para los desarrolladores como para los usuarios. El beneficio más importante de este enfoque de CSS es la mejora en eficiencia y mantenibilidad del código. En pocas palabras, es posible que ya no necesites mantener las clases de CSS. Mi elección personal para realizar esta tarea es TailwindCSS, pero puede haber casos de uso donde construir tu propio marco también sea adecuado.

<figure class="rounded-xl bg-slate-100 p-8 dark:bg-slate-800">
  <img
    class="mx-auto h-24 w-24 rounded-full"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="space-y-4 pt-6">
    <blockquote>
      <p class="text-lg font-medium">
        “Es fácil de personalizar, se adapta a cualquier diseño y el tamaño de
        compilación es pequeño.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Ingeniera de personal, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Alternativas

  • Bootstrap: Bootstrap fue ampliamente utilizado por empresas en el pasado y sigue siendo una buena solución, aunque no tan potente.

Otras Metodologías

Componentes BEM

La Metodología BEM (Bloque, Elemento, Modificador) es un enfoque popular utilizado en el desarrollo web para crear código CSS modular y reutilizable.

La desventaja de esto es que requiere que mantengas esos estilos con el tiempo, pero puede tener buenos usos, como librerías de componentes personalizables a partir de Custom Elements.

.opinions-box {
  margin: 0 0 8px 0;
  text-align: center;


  &__view-more {
    text-decoration: underline;
  }


  &__text-input {
    border: 1px solid #ccc;
  }


  &--is-inactive {
    color: gray;
  }
}