CSS llegible

Aquesta és la 6th secció del tutorial CSS Getting Started; s'analitza l'estil i la gramàtica del propi llenguatge CSS. Es canvia la forma en què  es veu el vostre arxiu CSS d'exemple, perquè sigui més llegible.

Informació: CSS Llegible

Podeu afegir espais en blanc i comentaris en les fulles d'estil perquè siguin més llegibles. També es poden agrupar selectors, quan les mateixes regles d'estil s'apliquen als elements seleccionats de diferents maneres.

Espai en blanc

L'espai en blanc vol dir espais reals, tabuladors i noves línies. Podeu afegir espais en blanc per fer les fulles d'estil més llegible.

En el context del disseny de la pàgina i composició, l'espai en blanc és la part de la pàgina que es deixa sense marcar: marges, separacions, i l'espai entre columnes i línies de text.

El arxiu CSS d'exemple actualment té una regla per línia, i gairebé el mínim d'espai en blanc. En un full d'estil complex aquesta disposició seria difícil de llegir, de manera que difilcutaria el seu manteniment.

El disseny escullit sol ser una preferència personal, però si els fulls d'estil són part de projectes compartits, aquests projectes podrian tenir les seves pròpies convencions.

Exemples

Hi ha qui els agrada el disseny compacte que hem estat utilitzant, i només divideixen una línia quan es fa molt llarga:

.carrot {color: orange; text-decoration: underline; font-style: italic;}

Hi ha qui prefereix una propietat-valor per línia:

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

Hi ha qui utilitza la sagnia de dos espais, quatre espais, o una tabulació són comuns:

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

Hi ha qui els agrada que tot estigui alienat verticalment (però un disseny com aquest és difícil de mantenir):

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

Hi ha qui fa servir espais en blanc mixtes per millorar la lectura.

.vegetable         { color: green; min-height:  5px; min-width:  5px }
.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

Hi ha qui utilitza tabulacions per al disseny. Hi ha qui només utilitza espais.

Comentaris

Els comentaris en CSS comencen amb /* i acaban amb */.

Podeu utilitzar els comentaris per fer comentaris reals en el full d'estil, i també per comentar parts d'ell temporalment per a propòsits de prova.

Per comentar part d'un full d'estil, col·locar aquesta part en un comentari perquè el navegador ho ignori. Aneu amb compte on s'inicia i acaba el comentari. La resta del full d'estil ha de tenir una sintaxi correcta.

Exemple
/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Selectors agrupats

Quan molts elements tenen el mateix estil, podeu especificar un grup de selectors, separant-los per comes. La declaració és vàlida per a tots els elements seleccionats.

En una altra part del full d'estils es poden especificar els mateixos selectors de nou de forma individual, per aplicar les regles d'estil individuals a ells.

Exemple

Aquesta regla fa que els elements <h1>, <h2> i <h3> tinguin el mateix color.

És convenient especificar el color en un sol lloc, en el cas en què hagi de ser canviat.

/* color for headings */
h1, h2, h3 {color: navy;}

Acció: Afegir comentaris i millorar el disseny

  1. Editeu l'arxiu CSS, i assegurar-se que té aquestes regles (en qualsevol ordre): 
    strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}
  2. Feu que sigui més llegible reordenant-ho d'una manera que ho trobeu lògic, i mitjançant l'afegit d'espais en blanc i comentaris de la millor manera que us sembli.
  3. Deseu el fitxer i refresqueu la pantalla del navegador, per assegurar-se que els canvis no afectin el funcionament de la fulla d'estil:
    Cascading Style Sheets
    Cascading Style Sheets
Repte

Comenteu una part de la fulla d'estils, sense canviar res més, perquè la primera lletra del document sigui vermella:

Cascading Style Sheets
Cascading Style Sheets

(Hi ha més d'una manera de fer això.)

Possible solution
One way to do this is to put comment delimiters around the rule for .carrot: 
/*.carrot {
  color: orange;
}*/
Hide solution
Veure la solució per el repte.

I ara què?

En el estil d'exemple s'ha utilitzat el text en cursiva i subratllat. La pàgina següent descriu més formes d'especificar l'aspecte del text en el document.