Primer CSS es un marco CSS gratuito de código abierto que se basa en un sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
Lean Markup es una forma de escribir HTML de una manera más eficiente y hacer uso de atributos en lugar de crear un elemento más. El uso de demasiados elementos que no son necesarios puede hacer que el código extenso y la legibilidad se vuelvan difíciles, además de tomar más tiempo para cargar. Se utiliza principalmente para escribir el código de manera ordenada y limpia con la sangría adecuada, además de utilizar los elementos de una manera eficiente que ayuda a reducir la longitud total del código, lo que a su vez mejora la legibilidad y el rendimiento general. Por ejemplo, considere el siguiente fragmento de código:
<span class="avatar">
<img src="link">
</span>
Aquí hemos utilizado la etiqueta <span> con una clase como “avatar”, que contiene la etiqueta <img>. Podemos lograr el mismo resultado solo con la etiqueta de ayuda <img>, es decir, declarando la fuente de clase e imagen dentro de la etiqueta <img>, lo que puede ayudar a reducir la longitud total del código y también hace que el código sea eficiente, junto con mejorando la legibilidad del código. El siguiente código es mucho mejor que el fragmento de código anterior.
<img class="avatar" src="Link">
Entenderemos ambos conceptos implementándolos a través del ejemplo.
Ejemplo 1: este ejemplo describe Primer CSS Lean Markup mediante la implementación del primer fragmento de código.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Primer CSS Lean Markup</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
span {
margin-left: 190px;
width: 280px;
height: 250px;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3 style="text-align:center;">
Primer CSS Lean Markup
</h3>
<span class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="gfgImg">
</span>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe el Primer CSS Lean Markup utilizando los elementos de manera eficiente, de modo que el código se vuelve más limpio y mejora el rendimiento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Primer CSS Lean Markup</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
img {
margin-left: 200px;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3 style="text-align:center;">
Primer CSS Lean Markup
</h3>
<img class="avatar"
alt="gfgImg"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png">
</body>
</html>
Producción:
Referencia: https://primer.style/css/principles/html#lean-markup