3 astuces CSS fort utiles

Voici quelques astuces CSS assez utiles, mais très peu utilisées.
Au menu :

  • Bien utiliser <HTML> et <BODY>
  • Appliquer un style à tous les éléments.
  • Donner plusieurs « class » à un élément

Bien utiliser <HTML> et <BODY>

<HTML>, comme tout autre élément, peut être personnalisé via les CSS.
Par exemple, on peut lui ajouter un background, un margin ou autre.
<BODY>, quant à lui, est interprété par la plupart des navigateurs comme un élément de type block.
Cette astuce implique donc de bien réfléchir à la nécessité d’utiliser un block type « mapage », ou « tout » comme j’ai (trop) souvent trouvé dans des templates 😉

Appliquer un style à tous les éléments.

Il est possible d’appliquer un style général à tous les éléments, via *
Cette technique est utilisée par certaines feuilles de Reset CSS, pour appliquer des marges intérieurs et extérieures de 0 par défaut sur tous les éléments.

* {
	margin	: 0;
	padding	: 0
}

Donner plusieurs « class » à un élément

Il est possible de donner plusieurs valeurs à un attribut class, ce qui permet de gérer plus proprement certains éléments.

/* CSS */
.rose {
	color	: pink;
}
.souligne {
	text-decoration	: underline;
}
texte rose et souligné

avec comme résultat « texte rose et souligné« .
edit : comme l’a noté Kazhar dans les commentaires, il faut nommer ses classes CSS en fonction de l’utilité de l’élément, mais pour le coup, il me fallait un exemple facile à comprendre, et à expliquer 😉

En espérant que ces 3 astuces en CSS vous aient été utiles 😉

Partager cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • La dernière est valide. Mais l’utilisation n’est pas correcte. En effet, il vaut mieux nommmer ses classes CSS en fonction de l’utilité de l’élément. Pas en fonction de l’aspect que l’on veut y donner.

    En nommant ainsi la classe, on perds tout l’intéret de CSS qui est de correctement séparer le design des tags.
    Ainsi, si un utilisateur désire modifier la couleur du texte rose, elle devra modifier la classe CSS dans le HTML alors que la logique aurait voulu qu’elle ne modifie « que » la couleur dans la classe CSS.

    Mais c’est secondaire dans ton problème 😉

  • Bien vu ^^
    Mais il fallait que je donne un exemple concret, et sur le coup, c’était le plus simple à comprendre pour un œil moins averti 😉

  • astuce 2 :
    à éviter, car couteux, et ca vire des paddings importants sur certains éléments tels que les boutons radios.
    préférez :
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

    astuce 3 :
    la je vais un peu « chipoter », mais il vaut mieux éviter de mettre des noms aux classes ou ids qui ont un rapport avec la traitement CSS ! le jour ou tu veux que ton lien soit bleu et plus rose, tu vas te retrouver avec un style « rose » bleu… ceci dit, le principe du « multi classe » est tout à fait juste 😉

  • @Mr. Question : Merci pour les précisions
    Pour le class « rose souligne », j’ai précisé qu’il me fallait un exemple concret, et effectivement, l’exemple n’est pas si bien choisi 🙂