Guía de estilo de las hojas de estilo. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

Qué es una guía de estilo

Una hoja de estilo se puede escribir de muchas maneras distintas y dar el mismo resultado.

Hay muchos aspectos que se pueden hacer de varias maneras (los espacios en blanco utilizados, los saltos de línea, el orden en que se escriben las propiedades, el orden en que se escriben las sentencias, etc.) y no se puede decir de forma objetiva que una manera esté bien y otra esté mal. Por ejemplo, los dos siguientes ejemplos son completamente equivalentes para los navegadores:

h1{color:white;background-color:black;}

h1 
   {
     color     :     white     ;
     background-color      :       black      ;
   }

Lo importante al escribir una hoja de estilo es seguir siempre los mismos criterios, para que sea más fácil detectar errores o reutilizar las hojas de estilo en nuevos proyectos. Pero la diversidad de casos posibles hace que cada regla tenga excepciones.

En estos apuntes, tanto en los ejemplos como en los ejercicios, se sigue una serie de criterios que se detallan a continuación. En la mayoría de casos se trata de criterios bastante extendidos, por lo que se recomienda al alumno seguirlos al realizar los ejercicios.

Juego de caracteres

Se recomienda que las hojas de estilo se guarden en el juego de caracteres UTF-8. De todas formas, se recomienda utilizar únicamente caracteres "ingleses" en las hojas de estilo. Es decir, se recomienda no utilizar acentos, ñ, ç, etc. en los nombres de las clases o ids. La única excepción admisible sería el uso de caracteres "no ingleses" en los comentarios

Notas:

El borrador de la recomendación CSS Syntax Module Level 3 describe cómo deben reconocer los navegadores el juego de caracteres de una hoja de estilo. El primer criterio es recibir en la cabecera Content-Type el valor del juego de caracteres charset=UTF-8. El segundo criterio es que la hoja de estilo empiece con la línea (@charset no se considera regla-arroba):
```
@charset "utf-8";
```
Pero ni Firefox ni Google Chrome atienden a esa línea, aunque sí a la cabecera Content-Type, como se comenta en la lección de diferencias entre navegadores.

Saltos de línea y espacios en blanco

Se recomienda escribir las sentencias de la siguiente manera:

Escribir el selector y la llave de apertura en las misma línea, sin sangrar.
Dejar un espacio en blanco entre el selector y la llave.
Escribir cada propiedad en una línea, sangrando cada línea con dos espacios en blanco y completando la línea con un punto y coma.
No escribir espacios antes de los dos puntos que separan la propiedad y su valor. Escribir un espacio tras los dos puntos.
No escribir espacios en blanco antes del punto y coma final de cada línea de propiedad
Escribir la llave de cierre en una línea, sin sangrar. En esa línea sólo estará la llave de cierre.
Dejar una línea en blanco entre sentencia y sentencia.

h1 {
  background-color: black;
  color: white;
}

p {
  text-indent: 3em;
}

Orden de las sentencias en la hoja de estilo

Se pueden utilizar dos criterios:

Escribir las sentencias en el orden en que aparecen los elementos en la página web. Este criterio se suele utilizar cuando una hoja de estilo se va a aplicar a una sola página, lo que será habitual en este curso, en que cada ejercicio tiene su propia página web.
```
html {
  /* ... */
}

body {
  /* ... */
}

h1 {
  /* ... */
}
```
Agrupar las sentencias por categorías. Por ejemplo, escribir primero las relativas a los bloques y después las relativas a elementos en línea. Dentro de cada categoría se pueden escribir las sentencias por orden alfabético o por el orden en que suelen aparecer en la página. Este criterio se suele utilizar cuando una hoja de estilo se va a aplicar a muchas páginas distintas, lo que suele ser habitual en sitios web reales.
```
h1 {
  /* ... */
}

p {
  /* ... */
}

address {
  /* ... */
}

em {
  /* ... */
}

strong {
  /* ... */
}
```

Orden de las propiedades en cada sentencia

Las propiedades se escribirán en el siguiente orden:

propiedades relacionadas con el posicionamiento (position, float, clear, width, height, top, right, bottom, left, overflow, etc.)
propiedades relacionadas con el modelo de caja (border, margin, padding, etc.)
propiedades relacionadas con el color (background-color, color)
resto de propiedades (en orden alfabético)

Cuando hay varias propiedades que hacen referencia a los lados (por ejemplo, margin-top, margin-right, margin-bottom, margin-left) yo tengo la costumbre de escribirlas en el orden left, right, top, bottom.

Yo tengo la costumbre de escribir los valores de la propiedad border en el orden color, grosor, estilo.

Nombres de las clases

Se intentará que los nombres de los clases hagan referencia a categorías más que a aspectos visuales. Por ejemplo, conviene evitar llamar a las clases con nombres de colores (azul, blanco, etc.) porque en una página web real los colores es uno de los elementos que más se suele cambiar con el paso del tiempo.

Lógicamente, esta recomendación es más importante en las webs reales que en un curso como este, ya que en las webs reales se modifica a menudo el aspecto visual, mientras que en un curso como este cada ejercicio es independiente y sólo se realiza una vez.

Por otro lado, esta recomendación es una de las más ambiguas y por tanto difíciles de seguir. Por ejemplo, aunque se desaconseje utilizar nombres de colores, sería más admisible definir clases "izquierda" y "derecha" para imágenes flotantes, que también hacen referencia a un aspecto visual. El motivo es que es menos probable que decidamos cambiar a la derecha todas las imágenes flotantes que salían a la izquierda y viceversa, que decidamos cambiar el color de un elemento o cambiar la gama de colores de un sitio web.

En los casos en los que no sea fácil nombrar las categorías, se recomienda utilizar nombres genéricos, por ejemplo "color-1", "color-2", "color-3", sería preferible a "azul", "rojo", etc.

Cuando el nombre de la clase contiene varias palabras o números, separar las palabras con guiones (-): por ejemplo "estilo-1", "fecha-edicion", "autor-libro", etc.

Orden de las clases en la hoja de estilo

Si se definen clases, se agruparán todas las sentencias en la primera aparición de la etiqueta (aunque en la página web esas clases aparezcan más tarde).

h1 {
  /* ... */
}

p {
  /* ... */
}

p.importante {
  /* ... */
}

p.errata {
  /* ... */
}

Clases o id

Se utilizarán preferentemente clases en vez de id, aunque las clases se vayan a asignar a un único elemento.

Únicamente se aconseja el uso de id cuando asignar la misma clase a varios elementos provoque problemas en la página (por ejemplo, en el caso de posicionamiento absoluto de elementos).

Número de clases

Cuando un elemento se muestra en una página de N formas distintas, se puede hacer como mínimo de dos maneras:

definir N clases distintas (una para cada de las formas distintas en que aparece el elemento)
definir N-1 clases distintas (una para cada una -menos una- de las formas distintas en que aparece el elemento) y definir la etiqueta sin clase como la forma distinta restante.

Se aconseja utilizar el primer método, es decir, definir tantas clases como tipos de elementos, y reservar la sentencia sin clase para los aspectos comunes a todas las clases.

Por ejemplo, supongamos que en una página hay tres tipos distintos de párrafos <p> (con tipos de letra o colores distintos, etc.). Podemos hacerlo de dos maneras (se aconseja utilizar la primera):

definir 3 clases distintas de párrafo <p> (una para cada de los tres tipos que hay en la página):

p.clase-1 {
  font-family: sans-serif;
}

p.clase-2 {
  font-family: serif;
}

p.clase-3 {
  font-family: monospace;
}

definir sólo 2 clases distintas de párrafo <p> (para dos de los tipos que hay en la página) y definir la etiqueta sin clase para el tercer tipo:
```
p {
  font-family: sans-serif;
}

p.clase-1 {
  font-family: serif;
}

p.clase-2 {
  font-family: monospace;
}
```

Guía de estilo de las hojas de estilo