Warning: Declaration of Walker_Comment2::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146
Creetik Blog » helper

Featured Post

[Creetik.com] Sortie le 15 septembre 2010

La beta-test de Creetik.com prend fin pour être remplacée par la version finale de Creetik.com. La sortie officielle est prévue le mercredi 15 Septembre 2010. Cette version est représentative du besoin exprimé par ses membres et bien plus. Avant toute chose, je tiens à remercier tous les internautes...

Read More

[CSS] – Les helpers

Posted by Webmaster | Posted in Conseils Creetik, css | Posted on 19-11-2010

1

Pour ce troisième volet des conseils Creetik, nous allons aborder une notion souvent méconnue mais qui s’avère très utile afin de maintenir le code.

Qu’est ce qu’un Helper Css ?

Les helpers Css sont des classes CSS dites « classiques » ayant pour particularité d’utiliser une seule propriété CSS.
Ces classes s’utilisent simplement de la même manière qu’une classe css.


/* Exemple d'un helper */

.mrg {margin:5px}

[...]

Pourquoi utiliser les helpers Css ?

Les helpers css vont vous faciliter la vie et rendront vos petites mises à jour très rapide. Vous n’aurez plus besoin de toucher à la css principale lors de chaque modifications, souvent responsable de bourdes et de régressions.

Comment organiser ses Helpers ?

Bien entendu, chaque intégrateur web possède sa petite technique, pour ce post je vais vous exposer celle que j’utilise au quotidien. Les commentaires sont là pour réagir ;)
Il vous faudra tout d’abord créer une nouvelle feuille de style (pour notre exemple, commons.css). Puis commencer à réfléchir aux propriétés que vous utilisez le plus souvent. Les propriétés margin et padding sont souvent les plus récurrentes.

Voici quelques helpers de la propriété margin, nous allons partir d’une valeur standard (5 pixels), et détailler chaque propriété.

/* Helpers Margin */

.mrg {margin:5px}
.mrg-l {margin-left:5px}
.mrg-r {margin-right:5px}
.mrg-b {margin-bottom:5px}
.mrg-t {margin-top:5px;}

Vous l’aurez remarqué, la lettre suivant le nom de la classe de base donne la direction de la propriété

Les helpers peuvent être appliqués par paliés, c’est la méthode qui vous permettra d’établir des standards d’espacements.


/* Helpers Margin - Par paliers */

.mrg-xs {margin:5px}
.mrg-l-xs {margin-left:5px}
.mrg-r-xs {margin-right:5px}
.mrg-b-xs {margin-bottom:5px}
.mrg-t-xs {margin-top:5px;}

.mrg {margin:10px}
.mrg-l {margin-left:10px}
.mrg-r {margin-right:10px}
.mrg-b {margin-bottom:10px}
.mrg-t {margin-top:10px;}

.mrg-xl {margin:20px}
.mrg-l-xl {margin-left:20px}
.mrg-r-xl {margin-right:20px}
.mrg-b-xl {margin-bottom:20px}
.mrg-t-xl {margin-top:20px;}

.mrg-xxl {margin:50px}
.mrg-l-xxl {margin-left:50px}
.mrg-r-xxl {margin-right:50px}
.mrg-b-xxl {margin-bottom:50px}
.mrg-t-xxl {margin-top:50px;}

Si vous êtes plusieurs à travailler et souhaitez gagner en lisibilité dans votre code, vous pouvez directement intégrer la valeur des helpers dans le nom des classes utilisées.


/* Helpers Margin - Par valeurs */

.mrg-5 {margin:5px}
.mrg-l-5 {margin-left:5px}
.mrg-r-5 {margin-right:5px}
.mrg-b-5 {margin-bottom:5px}
.mrg-t-5 {margin-top:5px;}

.mrg-10 {margin:10px}
.mrg-l-10 {margin-left:10px}
.mrg-r-10 {margin-right:10px}
.mrg-b-10 {margin-bottom:10px}
.mrg-t-10 {margin-top:10px;}

.mrg-15 {margin:15px}
.mrg-l-15 {margin-left:15px}
.mrg-r-15 {margin-right:15px}
.mrg-b-15 {margin-bottom:15px}
.mrg-t-15 {margin-top:15px;}

Créer des helpers à peu près pour tout !

Bien entendu, les propriétés CSS margin et padding ne sont pas les seules à pouvoir être utilisées de cette manière. Vous pouvez appliquer cette méthode à toutes les propriétés que vous êtes amenés à utiliser fréquemment.


/* Divers Helpers */

.block {display:block;}
.inline {display:inline;}

.txt-l {text-align:left;}
.txt-c {text-align:center;}

.bold {font-weight:bold;}

.float-l {float:left;}
.clear-b {clear:both;}

.pos-rel {position:relative;}
.pos-abs {position:absolute}

En utilisant la technique des helpers Css, vous réduirez le temps de maintenance de votre site mais aussi en terme de publication, vous n’aurez plus forcément à livrer là ou les feuilles de style css impactées par vos modifications avec les contraintes de cache que cela implique pour vos fidèles visiteurs.