RWD - les objets orientés css
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) |
---|---|
/ * 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 |
---|---|
/* 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 ?