Factorisation CSS

Bonjour,

Je commence par m'excuser sur le sujet a déjà été traité auparavant, je n'ai pas trouvé ce que je veux sur la recherche
J'ai fais un code CSS pour des boutons de différentes tailles, et je me demandais s'il était possible de compresser un peu ce code, je ne suis pas expert en la matière alors je suis preneur de vos idées

Merci beaucoup.

.inp_red_120{
	width:120px;
	height:30px;
	border:0;
	color:#fff;
	font-size:12px;
	background:url(bouton_rouge.png) 0 -60px no-repeat;}
.inp_red_120:hover,.inp_red_120:active,.inp_red_120:focus,.inp_red_120:visited{
	background-position:0 -90px;
	cursor:pointer;}
.inp_red_90{
	width:90px;
	height:30px;
	border:0;
	color:#fff;
	font-size:12px;
	background:url(bouton_rouge.png) 0 -120px no-repeat #fff;}
.inp_red_90:hover,.inp_red_90:active,.inp_red_90:focus,.inp_red_90:visited{
	background-position:0 -150px;
	cursor:pointer;}

Bonjour,

le minimiser pas vraiment, mais le factoriser et le rendre plus facilement transportable oui :

.bouton {
    height: 30px;
    width: 120px;
    border: 0;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    background: url(bouton_rouge.png) 0 -60px no-repeat;
}
.bouton:hover, .bouton:active, .bouton:focus, .bouton:visited {
	background-position: 0 -90px;
}
.90 {
	width: 90px;
	background-position: 0 -120px;
}
.90:hover, .90:active, .90:focus, .90:visited {
	background-position: 0 -150px;
}

La différence n'est pas forcément flagrante, mais tu disposes ainsi d'une classe "bouton" qui par défaut correspond à ton "inp_red_120", que tu peux étendre grâce à la classe "90" afin de modifier la largeur et la position du background. C'est un poil plus court, mais c'est surtout plus facile à lire, à comprendre, et à utiliser - à mon avis !

Bonjour,

Merci c'est parfaitement ce que j'entendais par là, du coup une dernière question certainement un peu bête Comment j'appelle les deux classes dans le même bouton ?

Tout simplement en les séparant par un espace:

class="bouton 90"

Ce qui permet une ré-utilisabilité maximale, c'est le principe des frameworks css - tu peux jeter un coup d'oeil à Knacss par exemple.

Il n'y a aucune limite au nombre de classes sur un même élément, avec un peu de prudence cependant car IE7 peut avoir du mal avec ça - et plus tu as de classes plus tu risques téléscoper des styles et te perdre

Tu peux te renseigner sur OOCSS et SMACSS qui sont des "philosophies" d'utilisation des css en faveur de la factorisation et de l'abstraction des classes, ça pourrait t'intéresser

Et bien merci infiniment Ten, ton aide est très précieuse Je vais regarder ce que tu m'as indiqué, le CSS me passionne mais j'ai encore beaucoup à apprendre.

Bon courage

euh oui mais non remplace la classe 90 par bouton-90
c'est plus lisible, une classe ne doit jamais commencer par un chiffre

masseuro a écrit :
une classe ne doit jamais commencer par un chiffre

+ 1