CSS

Mecanismos para añadir CSS a un archivo HTML

Selectores

Pseudoclases y pseudoelementos

Cascada y especificidad

Z-index y el contexto de apilamiento

Responsive Design

Arquitectura CSS

Flexbox

Explore

Arquitectura CSS

Las arquitecturas CSS consisten en manejar el código CSS con una serie de reglas y patrones para facilitar su lectura, mantenibilidad y escabilidad.

El código que has manejado no se asemeja a la realidad, pues deberás manejar varios cientos o miles de líneas de código. Las arquitecturas CSS se encargan de manejar una norma en el código para que cualquiera pueda añadir o quitar funcionalidad sin mucho trabajo.

⁠

Objetivos de las arquitecturas de CSS

Los objetivos de las arquitecturas de CSS son:

Ser predecible: el código debe ser lo menos complejo posible.

Reutilizable: el código debe ser lo menos redundante, para evitar problemas con la especificidad.

Mantenible: el código debe ser lo más fácil de manejar para añadir o quitar estilos.

Escalable: el código debe ser capaz de crecer.

Buenas prácticas de las arquitecturas de CSS

Las buenas prácticas de las arquitecturas de CSS son:

Lineamientos y estándares: definir normas en tu grupo de trabajo de cómo estará escrito el código.

Documentación: establecer una breve explicación del código y de los lineamientos, esto sirve especialmente para nuevas personas se familiaricen con lo que deben hacer.

Componentes: establecer de manera componetizada cada uno de los elementos de tu página, es decir, manejarlos por partes para después unirlos en un todo.

CSS orientado a objetos

La arquitectura OOCSS (Object Oriented CSS) consiste en separar la estructura principal y la piel o máscara.

En otras palabras, consiste en tener objetos que son estructuras principales. Estos objetos estarán unidos en una máscara, donde esta será la que cambie pero manteniendo la estructura intacta.

⁠

BEM: bloque, elemento y modificador

La arquitectura BEM (Block-Element-Modifier) es una de las más utilizadas actualmente. Consiste en manejar los elementos en clases definidas por bloques, elementos y modificadores.

Bloque: es la estructura principal que es contenedora de varios elementos.

Elemento: es el elemento HTML que hace referencia el contenedor.

Modificador: es un estilo específico para el elemento. Por ejemplo, un botón que tenga un color diferente a los demás, esto tiene relación con la especificidad.

⁠

⁠
`Más información`⁠
⁠

⁠

Documentación⁠

⁠

Arquitectura escalable y modular

La arquitectura SMACSS (Scalable and Modular Architecture for CSS) indica el orden de componentes que estarán ubicados en carpetas. La unión de estos componentes dará como resultado tu página web con estilos.

Base: elementos base, como botones, títulos, enlaces.

Layout: estructura de la página, relacionado con el Responsive Design.

Módulos: elementos que contienen a los elementos base.

Estado: estilos relacionados con el comportamiento de elemento, relacionado con las pseudoclases y pseudoelementos.

Temas: conjunto de estilos que definen tu página web.

⁠

Triángulo invertido de CSS

La arquitectura ITCSS (Inverted Triangle CSS) consiste en separar los archivos del proyecto; mediante ajustes, herramientas, elementos, entre otros. Todo esto para manejar los detalles de especificidad, claridad y magnitud.

⁠

Diseño atómico

La arquitectura Atomic Design también es una de las más utilizadas actualmente. Consiste en manejar los elementos como una estructura mínima, a partir de la unión de varias de estas, dará como resultado los estilos de la página web. Se basa en la estructura mínima de la materia, los átomos.

Átomos: estructura mínima; como botones, enlaces, títulos, entre otros.

Moléculas: unión de átomos.

Organismos: unión de moléculas.

Plantillas: unión de organismos.

Páginas: unión de plantillas.

⁠