Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean 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í.
Primer CSS Property Order es una regla importante que todo desarrollador debe mantener. Hay algunas propiedades que deben aplicarse en prioridad para cualquier clase.
Sintaxis: Esta es solo una orden para usar las propiedades CSS en cualquier elemento, lo mismo ocurre con las clases de Primer CSS.
.element {
// 1. Positioning
// 2. Box model (display, float, width, etc)
// 3. Typography (font, line-height, text-*)
// 4. Visuals (background, border, opacity)
// 5. Misc (CSS3 properties)
}
El siguiente ejemplo ilustra el orden de propiedad de Primer CSS:
Ejemplo 1: En este ejemplo, seguiremos el orden de las propiedades, pero no usaremos las clases de Primer CSS, aquí usaremos CSS real.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
position: fixed;
background: #cc0000;
padding: 15px;
}
span {
background: green;
border: 1px #ffffff solid;
padding: 5px;
}
pre {
padding-top: 50px;
height: 1200px;
width: 200px;
}
</style>
</head>
<body>
<div class="fixed">A Computer Science Portal for Geeks
<span>Geeksforgeeks</span>
</div>
<pre>
I am here to create a scrollable section
</pre>
</body>
</html>
Producción:
Primer orden de propiedad CSS
Ejemplo 2: en este ejemplo, lograremos el mismo resultado siguiendo el orden de las propiedades de Primer CSS en las clases de Primer CSS
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
/* To make the section scrollable */
pre {
padding-top: 50px;
height: 1200px;
width: 200px;
}
</style>
</head>
<body>
<div class="position-fixed
color-bg-danger-emphasis
p-3">
A Computer Science Portal for Geeks
<span class="color-bg-success-emphasis
border
rounded-0
p-2 p-1">
Geeksforgeeks</span>
</div>
<pre>
I am here to create a scrollable section
</pre>
</body>
</html>
Producción:
Primer orden de propiedad CSS
Referencia: https://primer.style/css/principles#property-order
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA