Les caractéristiques du langage

La portée

@media (min-width: 900px) { … }
@import url("speech.css") speech;

Les caractéristiques du langage

L'ordre du code source

  Retour en haut de page



.button {
  background-color: grey;
}

.button-dark {
  background-color: black;
}

Les caractéristiques du langage

La cascade et l'héritage

ul {
  text-transform: uppercase;
}


textarea {
  font-family: inherit;
}

Les caractéristiques du langage

La spécificité

  Retour en haut de page



#back-to-top {
  color: green;
}

…

a.button {
  color: yellow;
}

L'interface chaise-clavier

Les préférences personnelles

…


…
…

L'interface chaise-clavier

Les préférences personnelles

  
.aside {
  margin: 1em;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #555;
  box-shadow: 10px 15px 20px rgba(0, 0, 0, .25);
}
  
  
.aside {
  background-color: #555;
  box-shadow: 10px 15px 20px rgba(0, 0, 0, .25);
  font-size: 1rem;
  line-height: 1.5;
  margin: 1em;
}
  
  

L'interface chaise-clavier

La documentation

/** Objects
* @todo Documentation */

/** @bugfix - @affected IE6
 * http://positioniseverything.net/explorer/doubled-margin.html */
 * html .box {
  display: inline;
}

/** @see tools/sprite.scss */
.title-contact {
  @include sprite(after, 3.32em, 2.96em, title-contact);
}

L'interface chaise-clavier

La disparité des compétences

• Tous les dev (ou presque) ont déjà contribué à du code du CSS
• La compétence des différents intervenants n’est pas uniforme

Le calcul de la spécificité

  
[dir="ltr"] { … };              // Poids : 10


#logo { … };                    // Poids : 100


#searchform #logcont { … };     // Poids : 200


.sbibod { … };                  // Poids : 10


.lsf:focus { … };               // Poids : 20


#lst-ib { … };                  // Poids : 100


.gsfi { … };                    // Poids : 10


.srp #gs_st0 { … };             // Poids : 110

La gestion de la spécificité

La gestion de la spécificité

Les 3 côtés du triangle

En pratique

  // Generics
  @import "generics/box-sizing.scss";
  …

  // Elements
  @import "elements/link.scss";
  …

  // Objects
  @import "objects/media.scss";
  …

  // Components
  @import "components/button.scss";
  …

  // Utilities
  @import "utilities/visually-hidden.scss";
  …
            

En pratique

En pratique

  
…
  
…
  
…



    

      
…
      
…
      
…
    
    

Au niveau du code

• Favorise l'approche modulaire
• Limite la quantité de règles CSS
• Évite les guerres de spécificité

Pour le développeur

• Facilite (re)prise en main du code
• Simplifie la maintenance et les évolutions
• Prévient les surcharges accidentelles non souhaitées