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.
Primer CSS El formato general proporciona las diversas formas de escribir el código bien formateado mediante el uso de elementos adecuados con atributos que mejoran la legibilidad general del código, además de mejorar la experiencia del usuario que ayuda a mejorar la interactividad en el sitio web.
Lista de instrucciones para formato general:
- La primera es usar tabulaciones blandas con una sangría de dos espacios. Los espacios son la única forma de garantizar que el código se reproduzca de la misma manera en el entorno de cualquier persona.
- Debe usar el elemento <p> para escribir párrafos y evitar usar el elemento <br> varias veces.
- Los elementos en forma de lista siempre deben estar en <ul> , <ol> o <dl> en lugar de usar un conjunto de <div> o <p> .
- Utilice la etiqueta <label> para escribir cualquier tipo de texto presente en el formulario.
- Utilice siempre comillas alrededor de los atributos para mejorar la legibilidad.
- Evite escribir comentarios de etiquetas de cierre, como <!– /.element –> porque esto aumentará el tiempo de carga de la página, además, la mayoría de los editores tienen guías de sangría y resaltado de etiquetas de apertura y cierre.
- Evite las barras diagonales finales en los elementos de cierre automático. Como <br> , <hr> , <img> y <input> .
- Puede evitar escribir índices de pestañas.
Ejemplo 1: En el siguiente ejemplo, veremos el uso adecuado de la etiqueta <p> con atributos.
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</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h2 class="text-center"> Primer CSS General formatting </h2> <p class="line-note m-3" data-attribute="106"> Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. </p> </body> </html>
Producción:
Ejemplo 2: Este ejemplo describe el formato general de los elementos con atributos en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <title>Primer CSS</title> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks</h1> <h2 class="text-center"> Primer CSS General formatting</h2> <p class="p-2 m-3 text-light f3-light"> In General formating, use paragraphs of text that must be placed in a <p>tag. Every form input that has text, must be attached with <label> tag, especially when radio or checkbox elements are used. In order to listing the items, then use the <ol>, <ul>, <dl>, in place of using the <div> or <p>. </p> </body> </html>
Producción:
Referencia: https://primer.style/css/principles/html#general-formatting