Esta publicación se centrará en las diferentes formas de formatear CSS, que difiere de las diferentes formas de organizar CSS. Definitivamente conceptos relacionados, pero creo que la organización tiene más que ver con cómo se agrupan y ordenan las cosas, mientras que el formato tiene que ver con el espaciado y la sangría.
El formateo no tiene nada que ver con el funcionamiento de CSS. Estas son elecciones meramente estéticas del codificador. Pero eso no quiere decir que el formato no sea importante. Eso sería como decir que la elección del lienzo no es importante para un pintor. Afecta cómo se siente al escribir CSS, lo fácil que es leerlo, lo fácil que es navegar y lo fácil que es volver a visitar y familiarizarse con el CSS escrito anteriormente.
La razón por la que hay tantas opciones con el formato CSS es que no existen reglas de sintaxis estrictas en lo que respecta al espaciado y los saltos de línea. Por ejemplo:
div { width: 50px }es lo mismo que:
div{width:50px}es lo mismo que:
div
{
width: 50px
}Formato de varias líneas
.navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}Apostaría a decir que este es el más común. Es el más fácil de leer cuando se trata de fragmentos cortos, razón por la cual los tutoriales escritos utilizan con mayor frecuencia este formato. El ejemplo anterior no tiene una línea en blanco entre la llave de cierre y el siguiente selector, pero eso también es bastante común.
Formato de varias líneas con sangría
.navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}Un bloque con sangría indica que el selector es un selector más específico que el principal que está arriba y apunta a lo que serán los elementos secundarios del selector anterior.
Formato de una sola línea
div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }Este es probablemente el espacio y tamaño más eficiente, salvo que esté completamente comprimido para eliminar todos los espacios y saltos de línea. Esta técnica requeriría el menor desplazamiento vertical y horizontal mientras escribe y edita CSS, pero con el costo potencial de verse desordenado y algo difícil de navegar y encontrar lo que está buscando.
Formato de una sola línea con tabulación
h1, h2, h3 { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited { color: #2e2e2e; }
h2 a:hover { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }Formato de una sola línea con sangría
#content-area ol { margin: 15px 0 0 25px; list-style: decimal; }
#content-area ol ol { list-style: lower-alpha; }
#content-area ul { margin: 0 0 0 5px; list-style: none; }
#content-area ul li { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
#content-area ul ul { margin: 15px 0 0 25px; list-style: disc; }
#content-area ul ul li { background: none; padding: 0; }Un selector que está sangrado indica que el selector apunta a algo que es un elemento secundario del selector que está encima.
Principalmente formato de una sola línea
Prefiero el formato de una sola línea, pero utilizo Soft-Wrap en mi editor de texto, para que las líneas largas no se prolonguen para siempre, se ajustan al borde de la ventana. Entonces, para líneas realmente largas con muchos selectores, coloco un retorno duro y una pestaña sobre la nueva línea de atributos.
h1, h2, h3 { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h2 a, h2 a:visited { color: #2e2e2e; }
h2 a:hover { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
margin: 0 0 15px 0; color: #5e5d5d; }
td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
text-align: left; }Variaciones
El formato de una sola línea podría llevarse más lejos moviendo la llave de apertura a su propia línea, que es algo que veo bastante en PHP:
div
{
padding: 10px;
}En el formato de varias líneas con tabulación, he visto la riostra de apertura utilizada como una especie de pared de separación:
#content-area ol { margin: 15px 0 0 25px; list-style: decimal; }
#content-area ol ol { list-style: lower-alpha; }
#content-area ul { margin: 0 0 0 5px; list-style: none; }
#content-area ul li { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
#content-area ul ul { margin: 15px 0 0 25px; list-style: disc; }
#content-area ul ul li { background: none; padding: 0; }Combo
Una combinación de una sola línea y varias líneas solo agruparía los atributos relacionados en una sola línea:
.navigation_rss_icon {
position: absolute;
top: 10px; left: 10px; bottom: 10px; right: 10px;
font-size: 12px; font-weight: bold;
}Legibilidad frente a desplazamiento
Su elección de formato se reduce a la legibilidad. Debe poder navegar por su CSS rápidamente y encontrar lo que está buscando y realizar cambios rápidamente. Si encuentra difícil el formato de una sola línea porque le resulta difícil a sus ojos encontrar el atributo que está buscando, probablemente debería evitarlo.
Personalmente, encuentro que el formato de varias líneas es fácil de leer, pero aumenta la longitud (como el número real de líneas) entre 5 y 8 veces. En realidad, esto hace que todo el documento sea menos legible para mí, debido a todo el desplazamiento vertical. Si tiene un monitor algo estrecho, el formato de una sola línea puede causar un poco de desplazamiento horizontal que a veces es incluso peor.
El formato perfecto para usted es aquel que maximiza la legibilidad y minimiza el desplazamiento. Además, en un sentido más abstracto, solo necesita sentirse bien.