5 consejos para CSS super rápido

Jan 26, 2026

Cómo

[dieciséis]

¿Ha pensado en el tamaño del CSS de su sitio? Si su hoja de estilo está en globo, podría estar retrasando la representación de la página.

16 Ejemplos de animación CSS superiores

Aunque CSS no es el tipo de activo más grande que servirá, es uno de los primeros que el navegador descubre. Debido a que el navegador está bloqueado de interpretar la página hasta que CSS se descargue y se analiza, debe ser lo más inclinado posible. Aquí hay cinco consejos para ayudarte a llegar allí.

¿Tienes un sitio complejo? Necesitas el perfecto Alojamiento web Servicio. O, si quieres hacer un sitio sin el alboroto, prueba un Creador de sitios web .

01. Use selectores poco profundos

Tus padres te dijeron que la superficialidad no es una virtud, pero cuando se trata de CSS, están equivocados. Utilizado consistentemente, los selectores poco profundos pueden recortar kilobytes de las hojas de estilo grande. Toma este selector:

nav ul li.nav-item

Esto podría expresarse más sucintamente:

.nav-item

Además de ayudar a mantener su CSS Svelte, el navegador también hará que los elementos sean orientados por los selectores poco profundos más rápidos. Los navegadores leen selectores de derecha a izquierda. Cuanto más profundos sean los selectores, más tiempo se necesita para que el navegador vuelva a renderizar y reenviar los elementos a esos selectores. Para las demandas complejas que reflomezan a menudo, los selectores cortos también pueden reducir a Jank.

Idealmente, desea que los selectores sean lo más poco profundos posible, pero esto no significa que deba cortar todo hasta el hueso. A veces necesita una especificidad adicional para extender los componentes. Golpea el equilibrio correcto, pero también sea pragmático.

02. Use propiedades de taquigrafía.

Using shorthand CSS will speed up your site

Esto parece un sentido común, pero se sorprenderá de la frecuencia con la que las propiedades de Longhand se usan innecesariamente. Aquí hay un ejemplo de algunas propiedades de Longhand en uso:

 Tamaño de fuente: 1.5REM;
Línea de altura: 1.618;
Fuente-familia: "Arial", "Helvetica", Sans-Serif;

¡Eso es un montón de CSS! Vamos a ordenar eso:

 Fuente: 1.5REM / 1.618 "Arial", "Helvetica", Sans-Serif;

los fuente La propiedad de taquigrafía condensa varias declaraciones en un único ventilador que ocupa mucho menos espacio.

En el ejemplo que se muestra arriba, la taquigrafía usa aproximadamente un 40 por ciento menos de espacio que su equivalente de longhand. No es tan legible a primera vista, pero la sintaxis se convierte en una segunda naturaleza después de haber pasado un tiempo usándolo.

Por supuesto, fuente No es el único Shorthand disponible para usted. Por ejemplo, margen se puede utilizar en lugar de propiedades más largas, como margen superior De margen derecho etcétera.

los relleno La propiedad funciona de la misma manera. Para obtener más maneras de limpiar su CSS, Mozilla Developer Network ofrece una lista útil de Referencias de propiedad de taquigrafía .

¿Qué pasa si necesita anular un valor más abajo en la cascada? Por ejemplo, digamos que tiene un elemento de encabezado que necesita cambiar su tamaño de fuente para pantallas más grandes.

En este caso, debe usar el más específico. tamaño de fuente Propiedad en lugar de:

 H1 {
    Fuente: 1.5Rem / 1.618 "Arial", "Helvetica", Sans-Serif;
}
@media (Min-Anchth: 60REM) {
    H1 {
        Tamaño de fuente: 2REM;
    }
}

Esto no solo es conveniente, sino que también aumenta la flexibilidad de los componentes. Si alguna parte de la subyacente fuente La propiedad se modifica, esos cambios se filtraron hasta pantallas más grandes. Esto funciona ideal para anulaciones de componentes donde un nuevo contexto requiere un tratamiento diferente.

03. Utilice la pista de recurso de precarga

los precarga La sugerencia de recursos puede administrar al navegador una ventaja en la carga del CSS de su sitio. los precarga Sugerencia de recursos le dice al navegador que inicie una recuperación temprana para un activo.

Puedes configurarlo como un & lt; link & gt; Etiqueta en HTML:

  & lt; link rel = "precarga" href = "/ css / styles.csss" como "estilo" & gt;

O como un encabezado HTTP en la configuración de su servidor:

  Link: & lt; /css/styles.css> ;; rel = precarga; como estilo

En ambos escenarios, precarga le da al navegador un comienzo de la cabeza en la carga /csss/styles.css . Usando precarga En un encabezado HTTP es preferible, ya que esto significa que el navegador descubrirá la sugerencia antes en los encabezados de respuesta, en lugar de más adelante en el organismo de respuesta.

Otra razón para usar precarga En un encabezado HTTP es que iniciará un evento de empuje del servidor en la mayoría de las implementaciones HTTP / 2. El empuje del servidor es un mecanismo mediante el cual los activos se empujan previamente al cliente cuando se realizan solicitudes de contenido, y ofrece beneficios de rendimiento similares a los CSS enlinados.

El servidor PUSH no está disponible en http / 1. Sin embargo, usando precarga En un entorno HTTP / 1 todavía puede mejorar el rendimiento.

04. Culla de redundancias con CSSCSS.

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations

Puede pagar para verificar su CSS para reglas duplicadas con un comprobador de redundancia. Tome la herramienta basada en rubíes CSSCSS, por ejemplo.

Los usuarios de Ruby pueden instalarlo con:

  gema instalar csscss

Una vez instalado, puede examinar su CSS para desperdiciarnos así:

  csscss -v styles.css

Este comando enumera qué selectores comparten reglas que puede deshacerse para ahorrar espacio:

 {H1} y {P} Compartir 3 Declaraciones
  - Color: # 000
  - Altura de la línea: 1.618
  - Margen: 0 0 1.5REM

Puede mover las reglas duplicadas en un selector:

 H1, P {
    Color: # 000;
    Línea de altura: 1.618;
    Margen: 0 0 1.5REM;
}

Te sorprendería de la cantidad de espacio que este proceso puede ahorrar en grandes proyectos. Utilizar el --ayuda Opción para ver más comandos que puede usar para ajustar las cosas más.

05. Ve la milla extra con CSSNANO.

cssnano takes your nicely formatted CSS and runs it through many focused optimisations

Para la cereza en la parte superior, puedes usar cssnano - Un nodo y una herramienta dependiente de POSTSS. CSSNANO no solo minifica CSS, hace que muchas optimizaciones enfocadas puedan reducir aún más su CSS. Instalélo en su sistema con NPM así:

 NPM I -G CSSNANO-CLI

Luego úselo para optimizar su CSS:

 CSSNANO STYLES.CSS Optimized-Styles.css

Si la ejecución de los comandos ad hoc no es su estilo, puede automatizar CSSNANO con un sistema de compilación. Aquí está cómo usar CSSNANO en un Gulpfile:

 Const Gulp = Requerir ("Gulp");
Const PostCSS = Requerir ("Gulp-Postcss");
const cssnano = requiere ("cssnano");

const buildcssss = () = & gt; {
    Devuelve Gulp.SRC ("CSS / STYLES.CSS")
        .Pipe (PostCSS ([CSSNANO ()])
        .Pipe (Gulp.Dest ("CSS / Optimizado"));
};
Const Watch = () = & gt; {
    gulp.watch ("css / styles.css", buildcsss);
};
exports.buildcsss = buildcss;
exports.watch = reloj;

los buildcss la tarea lee el CSS que escribes CSS / Styles.css , luego Tube la salida optimizada a la CSS / Optimizado directorio. los reloj La tarea comienza buildcss Cada vez que ocurren cambios en CSS / Styles.css .

los reloj Luego se puede invocar la tarea en el terminal así:

 Gulp Watch

Con algunos ajustes, puede construir un flujo de trabajo que realice esta optimización específica, además de otras tareas relacionadas con la CSS, como la construcción de archivos / menos archivos, autopreflexión y más.

¿Quieres guardar las páginas de su sitio web? Exportar como PDF y ahorra en fiable almacenamiento en la nube .

Este artículo apareció originalmente en neto , la revista líder en el mundo para diseñadores web. Suscríbete aquí .

Artículos relacionados:

Entendiendo la propiedad de visualización de CSS
La nueva frontera de la animación CSS.
Cómo construir diseños complejos usando CSS

5 consejos para CSS super rápido

01. Use selectores poco profundos

02. Use propiedades de taquigrafía.

03. Utilice la pista de recurso de precarga

04. Culla de redundancias con CSSCSS.

05. Ve la milla extra con CSSNANO.

Cómo - Artículos más populares

Construye diseños adaptativos sin consultas de medios

Comience con activos en el diseñador de afinidad

Cómo dibujar un elefante

5 Nuevas características CSS calientes y cómo usarlas

Cómo crear un efecto de escritura animado

Cómo ilustrar los ojos de los animales

11 consejos para crear un paisaje acuoso en 3D

Prototipo de un botón de acción flotante en Pixate

Categorías