RWD - les objets orientés css

Portrait de Jenny
Soumis par Jenny le 6 déc 2014 - 19:26

Tags:

source http://thesassway.com/intermediate/using-object-oriented-css-with-sass

Les objets

motif visuel, qu'on peux résumer en un extrait indépendant de code HTML, CSS et js éventuellement.

Comment organiser le code CSS? en utilisant les objets et ces 2 principes:

  • séparer structure et thème
    structure et position dans un objet de base, les caractéristiques visuelles sont dans des classes d'extension.
  • séparer le contenant et le contenu. ne pas imiter la structure HTML en CSS
à ne pas faire moyen (visuel dans autre classe)
Ex rapide 
  / * La mauvaise façon * /
 .box-1 {
   border: 1 px #ccc solide;
   largeur: 200 px;
   hauteur: 200 px;
   border-radius: 10 px;
 }
 .box-2 {
   border: 1 px #ccc solide;
   largeur: 120 px;
   hauteur: 120 px
   frontière - rayon: 10 px;
 }

  / * Le bon moyen * /
 .box-1 {
   largeur: 200 px;
   hauteur: 200 px;
 }
 .box-2 {
   largeur: 120 px;
   hauteur: 120 px;
 }
 .box-frontière {
   border: 1 px #ccc solide;
   border-radius: 10 px;
 }
Maintenant, nous pouvons appliquer ces classes pour nos éléments HTML, les combinant pour créer des objets étendus. 
<Div class = "box-1 box-border"> Lorem ipsum </ div>
<Div class = "box-2 box-border"> Lorem ipsum </ div>

avec sass

à ne pas faire la facon de faire
Ex rapide 
/* The bad way */

a.twitter {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
  background: #55acee
  color: #fff;
}
span.facebook {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
  background: #3b5998;
  color: #fff;
}

/* The best way */
%button {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%twitter-background {
  color: #fff;
  background: #55acee;
}
%facebook-background {
  color: #fff;
  background: #3b5998;
}

.btn {
  &--twitter {
    @extend %button;
    @extend %twitter-background;
  }
  &--facebook {
    @extend %button;
    @extend %facebook-background;
  }
}
De cette facon ca s'utilise facilement dans le HTML: 
<a href="#" class="btn--twitter">Twitter</a>
<a href="#" class="btn--facebook">Facebook</a>

OOSass ?