8 simple rules for a robust, scalable CSS architecture

Tue, 01 Nov 2016 14:43:00 +0100

This is the manifest of things I’ve learned about managing CSS in large, complex web projects during my many years of professional web development. I’ve been asked about these things enough times that having a document to point to sounded like a good idea.

I’ve tried to keep the explanations short, but this is essentially the tl;dr:

Always prefer classes

Co-locate component code

Use consistent class namespacing

Maintain a strict mapping between namespaces and filenames

Prevent leaking styles outside the component

Prevent leaking styles inside the component

Respect component boundaries

Integrate external styles loosely

» Jarno Rantanen | github.com | via css-tricks.com

Imágenes embebidas en el código HTML, CSS o JSON

Sun, 06 Mar 2011 18:34:00 +0100

Mediante esquema data:URI se pueden incluir imágenes codificadas en base64 en el CSS de una página o en el src de una etiqueta img como si fueran fuentes externas. También se pueden introducir otro tipo de datos, como por ejemplo, código HTML.

<img src="data:image/png;base64,iVBORw0KGgo[...]QmCC" title="image" alt="image" />

También se puede utilizar en un JSON:

{
"image":{
"data_uri":"data:image/png;base64,iVBORw0KGgo[...]QmCC"
}
}

Las ventajas de utilizar este método son que no se necesitan abrir conexiones adicionales para decargar los datos, ya que toda la información está incluida en el propio archivo, con lo que dejan recursos disponibles, algo que puede ser especialmente útil en redes inalámbricas muy saturadas o lentas, como algunas redes de telefonía móvil, y se crean menos entradas en la caché del navegador. Además, al estar incluidos en el código se pueden cachear.

CSS on Karpoke - Just Another Blog

8 simple rules for a robust, scalable CSS architecture

Imágenes embebidas en el código HTML, CSS o JSON