Atomic CSS tiene como objetivo resolver algunos de los problemas tradicionales de CSS utilizando clases que son unidades de diseño de un solo propósito. Atomic CSS usa clases inmutables que tienen la responsabilidad completa de aplicar un estilo de unidad al componente seleccionado de la interfaz de usuario. En resumen, Atomic CSS es una regla para un estilo. Intenta hacer que el estilo sea más variable de una manera predecible.
Problema con CSS tradicional: CSS se usa ampliamente para proporcionar estilo a las aplicaciones web. Los preprocesadores CSS como Sass y LESS se utilizan para simplificar el estilo. Sin embargo, durante el desarrollo de una gran aplicación web, se repiten mucho los estilos utilizados en toda la aplicación. Hay varias razones para la repetición del código CSS, tales como:
- Diferentes desarrolladores que trabajan en diferentes componentes pueden escribir su propio código CSS con su estilo preferido
- Los componentes con una mínima diferencia en los estilos tienen un atributo importante de duplicación de estilo en ellos
Junto con estos problemas, la creación de aplicaciones web enormes crea confusión entre los desarrolladores debido a la preocupación de anular CSS. Esto hace que el desarrollo sea más lento e ineficiente.
Problemas resueltos con Atomic CSS Los siguientes problemas se resuelven con Atomic CSS:
- Reducción de la redundancia o duplicación de código.
- Confusión de anulación del CSS.
- Problemas relacionados con diferentes desarrolladores que trabajan en diferentes partes de la aplicación.
- Reducción del tiempo consumido en la depuración del estilismo.
Mantener la coherencia en las clases de Atomic CSS: la coherencia de las clases en Atomic CSS se puede mantener siguiendo un estilo específico al desarrollar las clases. Esto se puede hacer usando los siguientes pasos:
- Consulte la página de referencias de Atomic CSS .
- El tipo de clase que se necesita crear se puede ingresar y buscar en este sitio web.
- El sitio web devolvería el nombre de la clase que se usará como resultado y todos los desarrolladores pueden usarlo en el código para mantener la coherencia en el código.
Ejemplo 1: Este ejemplo demuestra un ejemplo de trabajo simple de Atomic CSS.
-
Paso 1: Cree un documento HTML y agregue el código de inicio para el sitio web. Cree una hoja de estilo y vincúlela a este documento HTML.
-
Paso 2: en el cuerpo, agregue una etiqueta de división y una etiqueta de encabezado con texto con las clases como se muestra a continuación:
html
<!DOCTYPE html><html><head><title>GfG Atomic CSS Example</title><linkrel="stylesheet"type="text/css"href="styles.css"></head><body><divclass="Bgc(#00FF00)"><h1class="C(#FFFFFF)">Geeks For Geeks</h1></div></body></html> - Paso 3: defina las clases utilizadas en la página HTML en la hoja de estilo y agregue el estilo requerido correspondiente al nombre de la clase.
.Bgc\(\#00FF00\) { background-color: #00ff00; } .C\(\#FFFFFF\) { color: #ffffff; }Como sugiere el nombre de la clase, Bgc(#00FF00) se usa para agregar verde (#00FF00) como color de fondo, y C(#FFFFFF) se usa para agregar blanco (#FFFFFF) como color del texto. Este ejemplo ahora se puede ejecutar en un navegador.
Producción:
Pseudo-clases: Estos son elementos agregados a un selector para especificar un estado particular. Algunas de las Pseudoclases con sus correspondientes mapas de sufijos son las siguientes:
| Pseudoclase | Mapa de sufijos |
|---|---|
| :enfoque | F |
| :activo | a |
| :flotar | h |
| :comprobado | C |
Ejemplo 2: En este ejemplo, se utiliza una pseudoclase con Atomic CSS.
Paso 1: Cree un documento HTML y agregue el código de inicio para el sitio web. Cree una hoja de estilo y vincúlela a este documento HTML.
Paso 2: agregue una clase de contenedor que tenga la primera división secundaria que contenga el texto del encabezado.
html
<!DOCTYPE html> <html> <head> <title> GfG Atomic CSS Pseudo Class Example </title> <link rel="stylesheet" type="text/css" href="./styles.css"> </head> <body> <div class="container"> <h1 class="D(1):h"> Geeks For Geeks </h1> </div> </body> </html>
Paso 3: defina la clase D(1):h utilizada en la página HTML en la hoja de estilo y agregue el estilo requerido correspondiente al nombre de la clase.
.D\(1\)\:h:hover {
background-color: green;
color: white;
}
Como sugiere el nombre de la clase, D(1) es la primera división secundaria dentro del contenedor. Agregarle una pseudoclase flotante, como D(1):hover, y representarla como D(1):h hace que se ajuste a la sintaxis de Atomic CSS. Por lo tanto, al usar la pseudoclase :hover, la clase de estilo dada se aplica cada vez que se pasa el cursor sobre el elemento.
- Antes de pasar el mouse:
Después de pasar el mouse:
