Composición en CSS | Tricks CSS

Tailwind y otras bibliotecas de servicios públicos son grandes partidarios de la composición. Pero, para mí, la versión de su trabajo siempre ha sido un gran sentido de inocencia.

Quiero decir, la composición de la utilidad básicamente está agregando valores de CSS a los elementos, uno a la vez …

<div class="p-4 border-2 border-blue-500"> ... </div>

Si somos honestos por un minuto, ¿en qué se diferencia esta composición de agregar reglas CSS directamente al aula?

/* This is composition too! */
.card {
  padding: 1rem; 
  border: 2px solid var(—color-blue-500)
}

Dicho esto, desde que comencé a usar Tailwind, no puedo negar que he estado pensando en la composición. Así que aquí hay algunas notas sobre la composición de CSS.

Este no es un concepto nuevo

Esencialmente, CSS es un lenguaje compuesto. Esta propiedad constitutiva ya está integrada en la cascada. Supongamos que ha decidido diseñar los botones con algunas propiedades:

.button {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles... */
}

Puede marcar otras clases en cualquier momento para modificar la apariencia del botón:

<button class="button primary"> ... </button>
<button class="button secondary"> ... </button>

.primary { background: orange; }
.secondary { background: pink; }

Incluso puede cambiar la apariencia de otros elementos a los botones agregando la apariencia de otros elementos. .button clase:

<a href="#" class="button"> ... </a>

En ambos casos, se produce la composición:

1. Hacemos arriba .button llegar a
2. Hacemos arriba .red llegar .button

Por lo tanto, la composición CSS ha existido desde entonces. Es un gran problema que no hablemos de composición en absoluto, porque es la esencia del lenguaje.

Los desarrolladores tienen una visión estrecha de composición

Cuando los desarrolladores hablan de composición en CSS, siempre parecen limitar la definición de composición para agregar clases en HTML.

<div class="one two"> ... </div>

Curiosamente, pocas personas (si las hay) hablan sobre la composición en los archivos CSS, desde el punto de vista del uso Mezcla de shas o Utilidad avanzada de viento de cola.

En estos casos, también estamos componiendo el estilo … ¡simplemente no directamente en HTML!

@mixin button () {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles ... */
}

.button {
  @include button; 
}

¿Qué es la composición?

La composición proviene de dos posibles palabras:

• escribir: juntar
• Sintético: Hecho de diferentes partes o elementos

Ambas palabras provienen del mismo idioma latino escribirque significa disposición o orientación.

En otras palabras … todo el trabajo se junta de alguna manera, por lo que todo el trabajo está formado. Esto me hace preguntarme por qué la composición se usa en un entorno tan limitado. 🤔

continuar…

La composición no reduce la expansión

La composición de la clase reduce la hinchazón de CSS solo cuando se usa clases de utilidad. Sin embargo, la composición de la clase con clases de utilidad puede causar hinchazón HTML.

<div class="utility composition">...</div>
<div class="one utility at a time">...</div>
<div class="may create html bloat">...</div>

Por otro lado, la composición de clase del selector puede no reducir la hinchazón de CSS. Pero ciertamente introducirán una hinchazón HTML más pequeña.

<div class="class composition">...</div>
<div class="card primary">...</div>
<div class="may override properties">...</div>
<div class="less html bloat"> ... </div>

¿Cuál es mejor? \ _ (ts) _/

html hinchazón y hinchazón de CSS puede ser la menor preocupación que

Sabemos esto:

• HTML puede contener muchas cosas y no tiene mucho impacto en el rendimiento.
• Lo mismo ocurre con CSS.
• 500 filas de CS son de aproximadamente 12 kb a 15 kb (según Claude).
• Las imágenes generalmente pesan 150 kb o incluso más grandes.

Para la mayoría de los proyectos, la optimización del uso de imágenes hará que su pérdida de peso sea mejor que el dolor de los servicios públicos y los selectores.

Es poco probable que reasignar su base de código para reducir la hinchazón CSS mejore el rendimiento. ¿Quizás el tiempo de carga se reduce en 2 milisegundos?

¿Pero refactorizar su base de código para mejorar el reconocimiento de los desarrolladores y facilitar el estilo? Más vale la pena.

Entonces, diré:

• HTML y CSS Bloat son muy irrelevantes.
• Vale la pena centrarse en la arquitectura, la estructura y la claridad.

Composición avanzada

Si nos reducimos, podemos ver que todos los estilos que escribimos se dividen en cuatro categorías:

1. disposición: Influir en la forma en que ponemos las cosas en las páginas
2. tipografía: Todas las fuentes relacionadas
3. tema: Todos los colores están relacionados
4. Efecto: Es genial tener cosas como gradientes, sombras, etc.

Los estilos de cada una de estas cuatro categorías no se cruzan entre sí. Por ejemplo:

• font-weight Solo pertenece a tipografía categoría
• colour Solo pertenece a tema categoría

Tiene sentido crear clases compuestas para cada categoría: una vez que termine, puede mezclar estas clases para crear la salida final. Al igual que LEGO, porque hay una falta de mejores ejemplos. (Bien, ¿tal vez es un duplo para los niños?)

Entonces, suponiendo que haga composición de clase para estas cuatro categorías, su HTML podría terminar luciendo así:

<!-- These are all pseudo classes. Use your imagination for now! -->
<div class="layout-1 layout-2 effects-1">
  <h2 class="typography-1 theming-1"> ... </div>
  <div class="typography-2"> ... </div>
</div>

Un ejemplo real es el siguiente si usamos Excelente estilo y Excelente diseño:

<div class="card vertical elevation-3">
  <h2 class="inter-title"> ... </h2>
  <div class="prose"> ... </div>
</div>

Estoy escribiendo más sobre estos cuatro tipos de sistemas y cómo crear cursos compuestos en mi último trabajo: Viento de cola no ortodoxa. Si está interesado, ¡échale un vistazo!

Resumir

Resumir:

1. CSS es esencialmente integral.
2. Los desarrolladores parecen ser muy estrechos sobre lo que significa la composición de CSS.
3. Puede combinarlo en HTML o CSS.
4. Los estilos que escribimos se pueden dividir en cuatro categorías: diseño, diseño, tema y efecto.

por fin: Excelente estilo Contiene clases que pueden ayudar a compensar cada una de estas cuatro categorías. Excelente diseño Manejar la parte del diseño. Y estoy escribiendo más sobre cómo crear un curso compuesto en un curso Viento de cola no ortodoxa.